代码之家 › 专栏 › 技术社区 › Geoff_S

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

vue-multiselect vue.js laravel

1

Geoff_S · 技术社区 · 5 年前

我有一个vue多选实例,我正在尝试映射它,这样我就可以从我传递给选项的数组的“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 = [];
              }
        }
    }
}

UPDATE:如果我转储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"}

0 回复 | 直到 5 年前

1

Marcello B. 5 年前

我明白发生了什么,当我昨天回答你的问题时,我对你的数据并不清楚。

现在了解您的响应数据如下

{
    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() .

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

[ 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);

        
        })