Vue Multiselect wird nicht angezeigt

Question

Ich versuche Vue Multiselect V2 in meinem Laravel 5.3 Projekt zu verwenden. Ich bin mit diesem Beispiel http://monterail.github.io/vue-multiselect/#sub-single-select

Ich habe folgendes Setup, in meinem app.js Datei:

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

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

Im Multiselect.vue Datei

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

Und ich Ich rufe es in der Klinge wie folgt an:

Dies ist

, wie es zeigt in dem DOM

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

Derzeit ist die Drop-Down-Anzeige nicht, und ich habe keine Fehler in der Konsole angezeigt. Ich hätte erwartet, irgendwo eine Vorlage hinzuzufügen, aber ich konnte in den Vue Multiselect-Dokumenten keine Erwähnung finden.

Answer 1

Wenn Sie diese Probleme haben, folgen Sie nicht den Beispielen in der offiziellen Dokumentation. Sie funktionieren nicht, sondern nutzen sie lieber von ihrer Github-Seite. https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage

Grund Beispiel

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