javascript - 在常规 html 页面中使用 vue-multiselect.js
问题描述
我正在尝试在常规 html 页面中使用 vue-multiselect.js。它不工作。这是我的代码:
<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">
<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>
<script type="text/javascript">
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']
}
}
}
</script>
这就是它在控制台中写的 -Uncaught SyntaxError: Unexpected identifier in line 12
解决方案
你做错了。这是该概念的工作代码:
HTML:
<div id="app">
<multiselect
v-model="value"
:options="options"
:multiple="true"
track-by="library"
:custom-label="customLabel"
>
</multiselect>
<pre>{{ value }}</pre>
</div>
Javascript:
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
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}`
}
}
}).$mount('#app')
推荐阅读
- servlets - Servlet双重初始化Websphere
- linux - Inotify 在事件第一次发生后不报告事件
- php - 如何使用实体引用类型以编程方式创建节点 - Drupal 8
- api - 如何使用变音符号发送 Twitter 状态更新?
- c++ - 非法将此类型用作模板中的表达式
- javascript - 如何使用 .not() 在正文中选择除一个元素之外的所有元素
- flutter - 如何处理2电话权限以获取设备的IMEI号码和手机号码?
- python - 如何修改数据集以进行训练
- solidity - 工厂错误调用的函数应该是应付的
- javascript - 函数开始使用状态之前的 Spinner(CircularProgress)