以 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>

nameid 属性被转移到底层 select 元素。

使用指令没有(好的)方法可以做到这一点,这是 Vue 2 中的有意设计决定。指令和 Vue 之间没有通信通道,就像组件和它的父组件之间一样。指令不是子 Vue,就像组件一样,它是一种单独处理一小部分 DOM 的方式。

我不认为用指令而不是组件来编写它会有什么特别的优势。

【讨论】:

我试图让它作为指令工作,所以我不必将它用作组件。

以上是关于以 Vue Js 作为指令的 Select2的主要内容,如果未能解决你的问题,请参考以下文章

有条件地在 vue js 中绑定自定义指令以“在元素事件之外单击”

如何利用Vue.js库中的v-html指令添加html元素

如何利用Vue.js库中的v-html指令添加html元素

vue.js介绍,常用指令,事件,以及制作简易留言版

vue基本语法

新人成长之入门Vue.js指令介绍