Компонент Vue по умолчанию выбирает некоторые параметры

Question

UPDATE: Проблемы не воспроизводятся с использованием стиля CDN. Вот отлично работающий JSBin: https://jsbin.com/ziqasifoli/edit?html,js,output

Похоже, что это связано с чем-то между webpack/gulf/elixir/vuefy .. I.e., все это инфраструктура Laravel 5.3. Не уверен даже, где начать отладку.

...

я борюсь с простым (как я думал) компонент, который получает name, options и selected в качестве входных данных и отображает несколько переключателя:

<!-- TagSelector.vue: --> 

<template> 
    <select :name="name" v-model="selected" multiple> 
     <option v-for="option in options" v-bind:value="option.value"> 
     {{ option.text }} 
     </option> 
    </select> 
</template> 

<script> 
    export default { 
     props: ['name', 'options', 'selected'], 
    } 
</script> 

.

// app.js 

Vue.component('tags-selector', require('./components/form_fields/TagsSelector.vue')); 

const app = new Vue({ 
    el: '#app' 
}); 

.

<!-- some.form.blade.php --> 

<tags-selector 
    class="form-control" 
    name="posted_data[tags]" 
    :selected="['opt1', 'opt2']" 
    :options='{!! json_encode($options) !!}' 
></tags-selector> 

Он отображает селектор, как ожидалось, но не выбранных параметров. Как мне заставить его работать?

Answer 1

Чтобы установить некоторые параметры, выбранные по умолчанию вы хотите, чтобы связать их с данными, чтобы сделать это просто сделать копию selected опоры и использовать v-model, чтобы связать его, что вы можете сделать с созданным крючком:

created: function() { 
    this.selectedCopy = this.selected; 
    }, 
    data: function(){ 
    return { 
     selectedCopy: [] 
    } 
    } 

Тогда просто связать их с помощью V-модель:

<select :name="name" v-model="selectedCopy" multiple> 
    <option v-for="option in options" v-bind:value="option.value"> 
    {{ option.text }} 
    </option> 
</select> 

Вот JSFiddle: https://jsfiddle.net/3cq1jjL8/