Vue，仅将选项的值映射到 v-model [英] Vue, mapping only the value of options to v-model

问题描述

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

I have a vue-multiselect instance that I'm trying to map in a way where I can take the value from the 'contact_data' index of the array I'm passing into the options and store it into an array without the index name. Basically, I need my copyUsers array to look like:

0:
  "[e-mail]"
1:
  "[e-mail]"

但现在是:

0:
  "contact_data":"[e-mail]"

无论如何，我在我的 response.data 对象上使用了扩展运算符，该对象最初将选项放入我的多选中，但现在我尝试将选项的索引映射为仅推送值进入数组但它不起作用，现在我什至没有任何选项可以显示在我的多选中.

Anyway, I've used the spread operator on my response.data object which initially got the options into my multiselect, but now I've tried to map the index of my options to only push the value into the array but it's not working and now I'm not even getting any options to show up in my multiselect.

我在这里做错了什么?

    <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 的完整对象

UPDATE: Full object if I dump response.data

1: {contact_data: "[e-mail]"}
2: {contact_data: "[e-mail]"}
3: {contact_data: "[e-mail]"}
4: {contact_data: "[e-mail]"}
5: {contact_data: "[e-mail]"}

推荐答案

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

I see what is going on, when I answered you yesterday I did not have a clear understanding of what your data looks like.

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

Now understanding that your response data looks something like this

{
    1: { contact_data: "[e-mail]" },
    2: { contact_data: "[e-mail]" },
    3: { contact_data: "[e-mail]" },
    4: { contact_data: "[e-mail]" },
    5: { contact_data: "[e-mail]" },
}

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

I can see that it is an object of objects. In order to transform this into an array. We will get an array of all the keys in that object using Object.keys().

根据给定的数据，这将返回

From the data given this will return

[ 1, 2, 3, 4, 5]

然后我们将使用map() 对 Object.keys() 中的数组进行迭代以创建 contact_data 数组.

Then we will use map() to iterate over the array from Object.keys() to create an array of contact_data.

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

这是一个沙箱

把它们放在一起，你的 Axios 调用就会变成

Putting it all together, your Axios call would then become

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！