时间戳

首页 > 解决方案 > 数据列表中的动态数组未显示

arrays - 数据列表中的动态数组未显示

问题描述

我正在开发一个项目的搜索栏。我有搜索栏参考我的数据列表，但我无法让内容显示在屏幕上。我知道数据列表使用的数组是正确的，因为它使用常规的无序列表显示。我可以在我的数据列表中显示一个静态数组，但不能在我的动态搜索数组中显示。

  <div>
    <!-- Search Bar -->
    <b-form-input
      v-model="text"
      type="text"
      placeholder="Search Courses/Professors"
      list="search-list-id"
      @input="searchInputChanged"
    ></b-form-input>

    <!-- Displayes Filtered List -->
    <li id="my-list-1" v-for="(item, index) in searchArray" :key="index">{{item}}</li>

    <!-- Datalist for Search Bar -->
    <datalist id="search-list-id">
      <!-- This one shows -->
      <option v-for="(size,index) in sizes" :key="index">{{ size }}</option>
      <!-- This one doesn't show. WHY? -->
      <option v-for="(item, index) in searchArray" :key="index">{{item}}</option>
    </datalist>
  </div>
</template>

<script>
import axios from "axios"; // Communicates w/ backend

export default {
  /* eslint-disable no-console */

  name: "Search",
  components: {},
  data() {
    return {
      text: "",
      searchArray: [],
      sizes: ["Small", "Medium", "Large", "Extra Large"]
    };
  },
  methods: {
    searchInputChanged() {...},
    getSearchFromBackend() {...}
  },
  computed: {
    filteredProfessors() {...}
  }
};
</script>

所以我可以很好地显示一个带有数据列表的静态数组...... 我的尺寸数组从下拉列表中可见

但是我的动态列表，我知道它有正确的数组，因为它在我的不显示 动态数组不显示 w/in 下拉

我似乎无法弄清楚这一点。有任何想法吗？

这是我的方法的内容...

methods: {
    searchInputChanged() {
      if (this.text.length > 1) this.getSearchFromBackend();
    },
    getSearchFromBackend() {
      // get the search from the backend
        new Promise((resolve, reject) => {
        this.status = "loading"; // we can show a loading wheel while in this state

        var dataToPassIn = { filter: this.text };
        axios({
          url: "/search/" + this.text,
          data: dataToPassIn,
          method: "GET"
        })
          .then(resp => {
            console.log(resp);
            this.searchArray = resp.data;
            this.status = "success";

            resolve(resp);
          })
          .catch(err => {
            console.log(err);
            this.status = "error";

            reject(err);
          });
      });
    }
  },

标签： arraysvue.jsdrop-down-menubootstrap-vuehtml-datalist

解决方案

避免对:key单个根元素下的直接子元素使用相同的 Vue：

    <!-- Datalist for Search Bar -->
    <datalist id="search-list-id">
      <!-- prefix key with string 'sizes-' -->
      <option v-for="(size,index) in sizes" :key="'sizes-'+index">{{ size }}</option>
      <!-- prefix key with string 'search-' -->
      <option v-for="(item, index) in searchArray" :key="'search-'+index">{{item}}</option>
    </datalist>

否则，Vue在一个元素下看到key两个相同的值。<options><datalist>

您还可以简化它以使用<b-form-datalist>辅助组件：

    <!-- Datalist for Search Bar -->
    <b-form-datalist id="search-list-id" :options="[...sizes, ...searchArray]">
    </b-form-datalist>

推荐阅读