数据列表中的动态数组未显示答案

【问题标题】：Dynamic Array in Data list not showing up数据列表中的动态数组未显示
【发布时间】：2020-03-23 07:28:19
【问题描述】：

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

  <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>

所以我可以很好地显示带有数据列表的静态数组... My sizes array is visible from the dropdown

但是我的动态列表，我知道它有正确的数组，因为它在我没有显示 Dynamic array not showing w/in dropdown

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

这是我方法的内容...

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);
          });
      });
    }
  },

【问题讨论】：

那么你在哪里为searchArray 分配一个新值（以及你在哪里执行异步请求）？介意提供整个源文件吗？
我在 searchInputChanged 方法中将值分配给 searchArray，该方法调用 getSearchFromBackend 方法，该方法将新值分配给 searchArray。我会更新帖子给他们看
已添加代码。
而且我认为我不会执行任何异步请求，除非它被 axios 混淆。我需要异步请求吗？
当您发出网络请求时，由于延迟和包裹需要传输的时间，它不可能是即时的，它是异步的。所以，正如你所说，它有点被 axios 混淆了。另外：我看不出在这里做 new Promise 的原因，因为 axios 正在这样做，所以不这样做会消除一些可能的错误的复杂性/来源。

标签： arrays vue.js drop-down-menu bootstrap-vue html-datalist

【解决方案1】：

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

    <!-- 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 会在一个 <datalist> 元素下看到两个 <options> 的相同 key 值。

您还可以使用<b-form-datalist> 辅助组件来简化此操作：

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

【讨论】：