Vue Multiselect不顯示

Question

我想在我的Laravel 5.3項目中使用Vue Multiselect V2。我使用的這個例子中，http://monterail.github.io/vue-multiselect/#sub-single-select

我有以下設置，我app.js文件：

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

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

在Multiselect.vue文件

<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> 

我我把它叫做刀片如下：

<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文檔中找不到任何提及的內容。

Answer 1

對於任何有這些問題的人，請不要按照正式文檔中的例子。他們不工作，而是從他們的Github頁面使用它。 https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage

基本例如

<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>