刀片中的Vue组件 [英] Vue component in blade
本文介绍了刀片中的Vue组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在刀片视图中使用此.我有.vue文件和js中的这段代码.
I´m trying to use this in my blade view. I have .vue file and this code in 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']
}
}
}
当我像这样在刀片中添加组件时
When i add component in blade like this `
<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>
选择无效,仅显示{{value}}字符串. ¿关于错误的任何想法? `
The select don´t work, only show {{value}} string. ¿Any idea about error? `
推荐答案
您也需要将父组件添加到HTML,因此,如果您有主app.js,它应该看起来像这样.
You need to add the parent component to the HTML too, so if you have main app.js it should look like this.
//mycomponent.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
// 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中的"my-component"上下文知道并跟踪此处的值是一个小提琴,因此您可以在操作中看到它.
So the "my-component" context in the html knows and tracks the value here is a fiddle so you can see it in action.
const Multiselect = VueMultiselect.Multiselect;
var MyComponent = {
components: {
Multiselect
},
data() {
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>
这篇关于刀片中的Vue组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文