我正在尝试使用 this在我的 Blade View 中。我在 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']
}
}
}
当我像这样在 Blade 中添加组件时:
<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}}
字符串。 ¿ 有什么想法吗?
最佳答案
将父组件也添加到 HTML 中,所以如果你有 main 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 中的 my-component
上下文知道并跟踪该值。
这是一个 fiddle ,你可以看到它的实际效果
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>
关于laravel - Blade 中的 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43218435/