刀片中的Vue組件

我試圖在我的刀片視圖中使用this。我有.vue文件和js中的這段代碼。刀片中的Vue組件

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>

的選擇鴕鳥政策工作，只能說明{{值}}字符串。 ¿有關錯誤的任何想法？ `

來源

2017-04-04 El Hombre Sin Nombre

什麼是在控制檯給定的錯誤？ –

沒有錯誤，顯然所有工作正常。 –

試圖刪除'@'標誌 –

您需要將父組件添加到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'] 
    } 
    } 
}

// app.js

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>

所以「我的分量」上下文在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/[email protected]/dist/vue-multiselect.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/[email protected]"></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>

來源

2017-04-05 07:47:15 Joe

刀片中的Vue組件

回答

相關問題