2017-03-08 11 views
0

この例は、Laravel 5.3のVue Multiselect "^ 2.0.0-beta.14"に使用しています。 https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usageVue Multiselectはv-modelを介して{{value}}を更新しません

プラグインは正しくレンダリングされますが、v-modelで選択できません。私は@{{ selected }}が現在の選択で更新することを期待しています。

app.js

Vue.component('dropdown', require('./components/Multiselect.vue')); 

VUE JS

<template> 
<div> 
    <multiselect 
    v-model="value" 
    :options="options"> 
    </multiselect> 
</div> 
</template> 

<script> 
    import Multiselect from 'vue-multiselect' 
    export default { 
    components: { Multiselect }, 
    data() { 
     return { 
     value: null, 
     options: ['list', 'of', 'options'] 
     } 
    } 
    } 
</script> 

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style> 

HTML

<div id="app"> 
    <h3>Dropdown</h3> 
    <div> 
    <label class="typo__label">Single select</label> 
    <dropdown></dropdown> 
    <pre class="language-json"><code>@{{ value }}</code></pre> 
    </div> 
</div> 

NB 公式の例では、が値の代わりにが選択されていますが、これはどちらでも動作しません。ドキュメントによると、選択はV2の値に置き換えられます。

答えて

0

理由値がルートに表示されない理由は、データがドロップダウンコンポーネントに分離されているためです。コンポーネントのデータをRootに表示するには、小道具を使用する必要があります。

詳細な説明

How to get data from a component in VueJS

のため、この質問を参照してください。
関連する問題