正确跟踪vue-multiselect中的选项

Question

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

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

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

我只是希望contact字段显示为他们的选择选项，我也希望这是我在以后的提交中发送的，所以我想通过该字段来标记和跟踪。

我在这里做错了什么？

<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将其转换为数组，该数组将被正确格式化。