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

Question

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:
  "[email protected]"
1:
  "[email protected]"

But right now it's:

0:
  "contact_data":"[email protected]"

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.

What am I doing wrong here?

    <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: Full object if I dump response.data

1: {contact_data: "[email protected]"}
2: {contact_data: "[email protected]"}
3: {contact_data: "[email protected]"}
4: {contact_data: "[email protected]"}
5: {contact_data: "[email protected]"}

Answer 1

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: "[email protected]" },
    2: { contact_data: "[email protected]" },
    3: { contact_data: "[email protected]" },
    4: { contact_data: "[email protected]" },
    5: { contact_data: "[email protected]" },
}

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]

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)

Here is a sandbox

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

        
        })