在 vue-multiselect 中正确跟踪选项

Question

我目前正在使用 axios 调用来使用 Vue-multiselect 执行自动完成。我现在正在从查询中取回我的数据，并且可以在将它转储到控制台时看到它，但是我仍然没有连接到某个地方，就用选项加载我的数组并在 multiselect 组件中跟踪它们.

现在，我的 response.data 看起来像这样：

0:
  contact: test@mail.com
1:
  contact: newmail@mail.com

我只是希望 contact 字段显示为他们的 select 选项，我也希望它是我在以后提交时发送的内容，所以我想标记和跟踪那一个字段。

我做错了什么？

<multiselect 
   v-model="copyUsers" 
   :options="copyUsersOptions" 
   @search-change="val => searchCopiedUsers(val)"
   :multiple="true" 
   :loading="loading"
   placeholder="Enter user(s) to be copied" 
   label="name"
   track-by="value">
 </multiselect>

 data() {
    return {
        loading: false,
         copyUsers: [],
         copyUsersOptions: [],
    }
 },
 methods: {
    searchCopiedUsers: function(val) {
          console.log('searched for', val);
          if (val) {
            this.loading = true;

            axios.get('/users/search',{params: {query: val}})
            .then(response => {
                
                this.copyUsersOptions = response.data;

                console.info(this.copyUsersOptions);

                
              })
              .catch(function(error) {
                this.loading = false;
                console.log(error)
              })
              .finally(function() {
                this.loading = false;
              })

          } else {
            this.copyUsersOptions = [];
          }
    },
}

Answer 1

尝试将对象转换为数组

axios.get('/users/search',{params: {query: val}})
    .then(response => {
        this.copyUsersOptions = [...response.data];
    })

目前，您的服务器结果是一个对象。从你的 vue-multiselect 初始化中，这将不起作用。通过使用 spread operator 将其转换为数组，数组将被正确格式化。

在 vue-multiselect 中正确跟踪选项

Properly tracking options in vue-multiselect

javascript

vue.js

vue-multiselect