2017-03-07 33 views
1

Laravel 5.3プロジェクトでVue Multiselect V2を使用しようとしています。Vue複数選択が表示されない

Multiselect.vueファイルで

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

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

<script> 
    import Multiselect from 'vue-multiselect' 

    export default { 
    components: { 
     Multiselect 
    }, 
    data() { 
     return { 
     value: '', 
     options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched'] 
     } 
    } 
    } 
</script> 

そして私を :私は私のapp.jsファイルで、私は次のセットアップを持って、http://monterail.github.io/vue-multiselect/#sub-single-select

をこの例を使用していますブレードで以下のように呼びます:

<div id="app"> 
    <label class="typo__label">Single select</label> 
    <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect> 
    <pre class="language-json"><code>@{{ value }}</code></pre> 
</div> 

これは、現在ドロップダウンが表示されない、と私は、コンソールにエラーが表示されないDOM

<div id="app"> 
    <label class="typo__label">Single select</label> 
    <!----> 
    <pre class="language-json"><code></code></pre> 
</div> 

に表示する方法です。私はどこかにテンプレートを追加することを期待していただろうが、私はVue Multiselectドキュメントでそのことについて何の言及も見つけられなかった。

答えて

1

これらの問題が発生した場合は、公式ドキュメントの例に従わないでください。彼らは機能しません、むしろGithubのページからこれを使用してください。 https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage

Basicの例

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

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

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style> 
関連する問題