Javascript 以Vue Js作为指令选择2
我一直在遵循vue js,我正在尝试改变它的工作方式,以允许我向常规的选择框添加v-select2指令,而不必为每个选择框创建模板和组件 我这里有一个演示如何使用该组件的示例 组件html如下所示,选项在JS中设置Javascript 以Vue Js作为指令选择2,javascript,vue.js,jquery-select2,vuejs2,Javascript,Vue.js,Jquery Select2,Vuejs2,我一直在遵循vue js,我正在尝试改变它的工作方式,以允许我向常规的选择框添加v-select2指令,而不必为每个选择框创建模板和组件 我这里有一个演示如何使用该组件的示例 组件html如下所示,选项在JS中设置 <div id="app"></div> <script type="text/x-template" id="demo-template"> <div> <p>Selected: {{ sel
<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>
我想要的是如下的东西
<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>
您可以按照您希望使用指令的方式使用组件:
<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的方法
我不认为用指令而不是组件来写这篇文章有什么特别的好处。我试图让它作为一个指令来工作,所以我不必把它作为一个组件来使用。
<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>