vue.js multiple select error

Question

problem with vue.js multiple select i tried many solution but i didn't find the solution and i get error [Vue warn]: expects an Array value for its binding, but got String

     <select name="users_id[]" multiple class="form-control" v-model="model.users_id" >
         <option>Select</option>
         <option v-for="users in option.users"
         v-bind:value="users.id">
         {{users.name}}
        </option>[![enter image description here][1]][1]
        </select>
 <script>   
    export default {
            props: ['title'],
            data(){
                return {
                   model: {
                        'title': '',
                        'users_id': '',
                    },
                    option: {
                        users: []
                    },
                }
            },
            created(){
                this.fetchData();
            },
            methods: {
                fetchData() {
                    let vm = this;
                    axios.get('/subject/create')
                        .then(function(response) {
                            Vue.set(vm.$data, 'option',   response.data.option)
                        })
                        .catch(function(error) {
                            console.log(error)
                        })
                },
</script>

Happyriri · Accepted Answer · 2017-04-13 17:15:29Z

13

One problem : multiple v-model="model.users_id" and users_id': '' :

You have a v-model with multiple options so the variable link with v-model must be an Array. But You passed a String with users_id': ''.

So do :

model: {
  'title': '',
  'users_id': [],
},

answered Apr 13, 2017 at 17:15

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin H Over a year ago

What if you are generating the name of the link on the fly like: v-model="search[name_of_field]?

Alex M. · Accepted Answer · 2017-04-13 17:37:26Z

3

Change:

model: {
  'title': '',
  'users_id': '',
},

To:

model: {
  'title': '',
  'users_id': []
},

answered Apr 13, 2017 at 17:37

Alex M.

6412 gold badges6 silver badges20 bronze badges

Comments

Roy J · Accepted Answer · 2017-04-13 17:10:31Z

0

In this line:

Vue.set(vm.$data, 'option',   response.data.option)

you are setting the option property, which should be an object containing an Array named users. The value you are setting it to is (probably) a JSON-encoded form of that, which is to say, a string.

This might fix it:

Vue.set(vm.$data, 'option', JSON.parse(response.data.option))

answered Apr 13, 2017 at 17:10

Roy J

44k10 gold badges84 silver badges106 bronze badges

Collectives™ on Stack Overflow

vue.js multiple select error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related