以 Vue Js 作为指令的 Select2
Posted
技术标签:
【中文标题】以 Vue Js 作为指令的 Select2【英文标题】:Select2 with Vue Js as directive 【发布时间】:2017-10-06 05:56:04 【问题描述】:我一直在关注 vue js wrapper component example. 我正在尝试更改其工作方式,以允许我将 v-select2
指令添加到常规选择框,而不必为每个选择框创建模板和组件。
我有一个JS Bin 这里显示使用该组件。
组件html如下(选项在JS中设置)。
<div id="app"></div>
<script type="text/x-template" id="demo-template">
<div>
<p>Selected: selected </p>
<select2 :options="options" v-model="selected">
<option disabled value="0">Select one</option>
</select2>
<p>Selected: selected2 </p>
<select2 :options="options" v-model="selected2">
<option disabled value="0">Select one</option>
</select2>
<p>Selected: selected3 </p>
<select2 :options="options" v-model="selected3">
<option disabled value="0">Select one</option>
</select2>
</div>
</script>
<script type="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
用JS如下:
Vue.component('select2',
props: ['options', 'value'],
template: '#select2-template',
mounted: function ()
var vm = this
$(this.$el)
.val(this.value)
// init select2
.select2( data: this.options )
// emit event on change.
.on('change', function ()
vm.$emit('input', this.value)
)
,
watch:
value: function (value)
// update value
$(this.$el).val(value)
,
options: function (options)
// update options
$(this.$el).select2( data: options )
,
destroyed: function ()
$(this.$el).off().select2('destroy')
)
var vm = new Vue(
el: '#app',
template: '#demo-template',
data:
selected: 0,
selected2: 0,
selected3: 0,
options: [
id: 1, text: 'Hello' ,
id: 2, text: 'World'
]
)
我想要的是类似下面的东西
<div id="app">
<p>Selected: selected </p>
<select name="selected1" id="selected1" class="select2" v-selectize v-model="selected">
... options here ...
</select>
<p>Selected: selected2 </p>
<select name="selected2" id="selected2" class="select2" v-selectize v-model="selected2">
... options here ...
</select>
<p>Selected: selected3 </p>
<select name="selected3" id="selected3" class="select2" v-selectize v-model="selected3">
... options here ...
</select>
</div>
【问题讨论】:
【参考方案1】:您可以按照您希望使用指令的方式使用您的组件:
<select2 name="selected1" id="selected1" v-model="selected">
<option disabled value="0">Select one</option>
<option value="1">Hello</option>
<option value="2">World</option>
</select2>
name
和 id
属性被转移到底层 select
元素。
使用指令没有(好的)方法可以做到这一点,这是 Vue 2 中的有意设计决定。指令和 Vue 之间没有通信通道,就像组件和它的父组件之间一样。指令不是子 Vue,就像组件一样,它是一种单独处理一小部分 DOM 的方式。
我不认为用指令而不是组件来编写它会有什么特别的优势。
【讨论】:
我试图让它作为指令工作,所以我不必将它用作组件。以上是关于以 Vue Js 作为指令的 Select2的主要内容,如果未能解决你的问题,请参考以下文章