vue.multiple select 오류입니다.

vue.multiple select 오류입니다.

vue.js multiple select 문제: 많은 솔루션을 시도했지만 솔루션을 찾지 못해 오류가 표시됨 [Vue warn]: 바인딩에 어레이 값이 필요하지만 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>

한 가지 문제:multiple v-model="model.users_id"그리고.users_id': '':

가지고 있다v-model와 함께multiple options그래서 변수와 연결된다.v-model어레이여야 합니다.하지만 당신은 다음 문자열로 전달했습니다.users_id': ''.

다음과 같이 합니다.

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

변경:

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

수신인:

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

다음 행:

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

를 설정하고 있습니다.option속성: 이름 있는 배열을 포함하는 개체여야 합니다.users설정되는 값은 (아마도) JSON 인코딩 형식, 즉 문자열입니다.

이것으로 해결할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/43398029/vue-js-multiple-select-error