javascript - axios调用，使用vue将响应数据获取到选择选项中

Question

我在这里想做的就是弄清楚如何将响应数据值绑定(bind)到我的多选选项中，但我无法弄清楚我做错了什么。

控制台日志正确显示了我返回的结果，因此我知道它们正在返回，但我不知道如何将它们与我的多选选项联系起来。

例如，如果我在多选中输入“Day”，我的 axios 调用将执行自动完成功能并获取匹配选项，以便我的控制台显示:

 0:
    tag_id:  "1001"
    tag_data: "First Day"
 1:
    tag_id:   "1002"
    tag_data: "Second Day"

那么我怎样才能将这些返回值放入我的选项中？

  <div id="tagApp">
      <multiselect
      v-model="value"
      :options="options"
      :loading="loading"
      :multiple="true"
      :taggable="true"
      @search-change="val => read(val)"
      ></multiselect>
  </div>

new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#tagApp",
      data() {
        return{
            value: [],
            loading: false,
            options: []
        }

      },
      methods: {
        read: function(val){
            //console.log('searched for', val);
          if (val) {
            this.loading = true;
            this.options = [];

            const self = this;
            console.log(val);

            axios.get('campaigns/search',{params: {query: val}})
                .then(function (response) {
                    self.options = response.data;
                    console.log(response.data);
            });

          } else {
            this.options = [];
          }
        }
      }
    })

Answer 1

由于您使用对象作为选项，因此您需要将 label 和 track-by 属性传递给多选组件。请参阅文档 here

<multiselect
  v-model="value"
  label="tag_data"
  track-by="tag_id"
  :options="options"
  :loading="loading"
  :multiple="true"
  :taggable="true"
  @search-change="val => read(val)"
></multiselect>