ブレードのVueコンポーネント

Question

ブレードビューでthisを使用しようとしています。私は.vueファイルとこのコードをjsに持っています。

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'] 
    } 
    } 
} 

私はこの `

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

ようなブレードに選択ドント作業のみを表示{{値}}文字列をコンポーネントを追加します。 ¿エラーについてのご意見は？ `

Answer 1

親コンポーネントをHTMLに追加する必要があります。メインのapp.jsがある場合は、次のようになります。

// mycomponent.js

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'] 
    } 
    } 
} 

//は

var MyComponent = require('./mycomponent'); 

var app = new Vue({ 
    el: '#app', 
    components: { 
    MyComponent 
    } 
}); 

// index.blade.php

<div id="app"> 
     <my-component inline-template> 
     <div> 
      <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> 
     </my-component> 
    </div> 

だから、 "私の成分" コンテキストをapp.js htmlの中で値を知っていると追跡するのは、ここでの値はフィドルなので、実際にそれを見ることができます。

const Multiselect = VueMultiselect.Multiselect; 
 

 
var MyComponent = { 
 
    components: { 
 
    Multiselect 
 
    }, 
 
    data() { 
 
\t return { 
 
     value: '', 
 
     options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched'] 
 
    } 
 
    } 
 
}; 
 
    
 
var app = new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    MyComponent 
 
    } 
 
});

<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script> 
 
<script src="https://vuejs.org/js/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <my-component inline-template> 
 
    <div> 
 
     <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> 
 
    </my-component> 
 
</div>