我正在尝试使用 Vue.js 多选组件: https://vue-multiselect.js.org/
不幸的是,它没有按应有的方式呈现。 我得到的不是多选下拉列表,而是类似这样的内容:
使用的代码:
HTML:
<div id="app">
<button @click="toggle">open and close later
</button>
<pre>{{ isOpen }}</pre>
<multiselect
ref="multiselect"
v-model="value"
:options="options"
:multiple="true"
track-by="library"
:custom-label="customLabel"
@close="isOpen = false"
@open="isOpen = true"
>
</multiselect>
</div>
使用的库(包含在 ):
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
使用的脚本(位于页面底部):
<script>
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
isOpen: false,
value: { language: 'JavaScript', library: 'Vue-Multiselect' },
options: [
{ language: 'JavaScript', library: 'Vue.js' },
{ language: 'JavaScript', library: 'Vue-Multiselect' },
{ language: 'JavaScript', library: 'Vuelidate' }
]
},
methods: {
customLabel (option) {
return `${option.library} - ${option.language}`
},
toggle () {
this.$refs.multiselect.$el.focus()
setTimeout(() => {
this.$refs.multiselect.$refs.search.blur()
}, 400)
}
}
}).$mount('#app')
</script>
最佳答案
Probably the most complete selecting solution for Vue.js 2.0, without jQuery.
并且您正在使用 vue 1.0
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
所以需要将其更改为v2
您还需要查看控制台以查看是否有任何错误并修复它们
关于javascript - Django Vue.js - 渲染多选下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51223298/