Vue，仅将选项的值映射到 v-model

Question

我有一个 vue-multiselect 实例，我试图以一种方式映射，我可以从我传递给选项的数组的 'contact_data' 索引中获取值并将其存储到没有索引名称的数组。基本上，我需要我的 copyUsers 数组看起来像：

0:
  "email@mail.com"
1:
  "new@mail.com"

但现在是：

0:
  "contact_data":"email@mail.com"

无论如何，我在我的 response.data 对象上使用了扩展运算符，它最初将选项放入我的多选中，但现在我试图映射我的选项索引以仅将值推入阵列，但它不工作，现在我什至没有任何选项显示在我的多选中。

我做错了什么？

    <multiselect 
    v-model="copyUsers" 
    @search-change="val => searchCopiedUsers(val)"
    :options="copyUsersOptions.map(i => i.contact_data)" //changed this from copyUsersOptions
    :multiple="true" 
    :loading="loading"
    placeholder="Enter user(s) to be copied" 
    label="contact_data"
    track-by="contact_data">
</multiselect>


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

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

                    console.info(this.copyUsersOptions);
                    console.log('here are the users');
                    console.log(this.copyUsers);

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

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

更新：如果我转储完整对象 response.data

1: {contact_data: "test@mail.com"}
2: {contact_data: "johndoe@msn.com"}
3: {contact_data: "res@gmail.com"}
4: {contact_data: "info@globe.net"}
5: {contact_data: "testing@yahoo.com"}

Answer 1

我明白了，我昨天回答你的时候并没有清楚地了解你的数据是什么样子的。

现在了解到您的响应数据看起来像这样

{
    1: { contact_data: "test@mail.com" },
    2: { contact_data: "johndoe@msn.com" },
    3: { contact_data: "res@gmail.com" },
    4: { contact_data: "info@globe.net" },
    5: { contact_data: "testing@yahoo.com" },
}

我可以看出它是对象的对象。为了将其转换为数组。我们将使用 Object.keys().

获取该对象中所有键的数组

根据给定的数据，这将 return

[ 1, 2, 3, 4, 5]

然后我们将使用 map() 遍历 Object.keys() 的数组以创建 contact_data.

的数组

Object.keys(response.data)
      .map((key) => response[key].contact_data)

Here is a sandbox

将它们放在一起，您的 Axios 调用将变为

axios.get('/ticket/users/search',{params: {query: val}})
    .then(response => {
        
        this.copyUsersOptions = Object.keys(res.data)
                                   .map((key) => 
                                      response.data[key].contact_data
                                   )

        console.info(this.copyUsersOptions);
        console.log('here are the users');
        console.log(this.copyUsers);

        
        })

Vue，仅将选项的值映射到 v-model

Vue, mapping only the value of options to v-model

laravel

vue.js

vue-multiselect