vuejs2 和选择的选择问题答案

【问题标题】：vuejs2 and chosen select issuevuejs2 和选择的选择问题
【发布时间】：2017-05-31 10:19:30
【问题描述】：

美好的一天，请查看this bin。它是用 Vue 0.12 版本和chosen js 编写的。我怎样才能使它与 vue2 版本一起工作。我真的需要它作为指令而不是组件。

`<div id='search`-results'>
Vue model value <br>
{{city | json}}
<hr>
Select value:
<!-- note the `v-model` and argument for `v-chosen`  --> 
<select class="cs-select" v-model="city" options="cities" v-chosen="city"></select>

<select v-model="city" options="cities"></select>

Vue.directive('chosen', {
    twoWay: true, // note the two-way binding
    bind: function () {
        $(this.el)
            .chosen({
                inherit_select_classes: true,
                width: '30%',
                disable_search_threshold: 999
            })
            .change(function(ev) {
                this.set(this.el.value);
            }.bind(this));
    },
    update: function(nv, ov) {
        // note that we have to notify chosen about update
        $(this.el).trigger("chosen:updated");
    }
});

var vm = new Vue({
  data: {
      city: 'Toronto',
      cities: [{text: 'Toronto', value: 'Toronto'}, 
               {text: 'Orleans', value: 'Orleans'}]
  }
}).$mount("#search-results");

【问题讨论】：

我认为“我需要这个作为 Vue2 中的指令”等同于“我需要有人帮助我以错误的方式做这件事”。 Vue2 中的指令没有双向绑定。
我想将它保留在指令中的原因是我在选择元素上有很多属性，我不想传递给组件。
那么您可能问错了问题。可能“我怎样才能合理地将所有这些属性传递给包装器组件”是您正在寻找的。span>
这可能有用：sagalbot.github.io/vue-select
感谢您的帖子。 Vue.js 官方文档也有一个类似的 jQuery 插件示例组件包装器：select2 vuejs.org/v2/examples/select2.html

标签： vue.js vuejs2

【解决方案1】：

这里它被实现为一个支持v-model 的包装器组件和一个选项槽。这使它成为标准select 小部件的直接替代品，至少就基本功能而言。 updated() 很高兴会注意到选项列表和值的变化。

由于 Vue2 不支持双向指令，我不相信有办法将其作为指令来实现。如果你真的需要，你会想要使用 Vue1。

var vm = new Vue({
  el: '#search-results',
  data: {
    city: 'Toronto',
    cities: [{
      text: 'Toronto',
      value: 'Toronto'
    }, {
      text: 'Orleans',
      value: 'Orleans'
    }]
  },
  components: {
    'chosenSelect': {
      template: '<select class="cs-select" v-model="proxyValue" ><slot></slot></select>',
      props: ['value', 'options'],
      computed: {
        proxyValue: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', newValue);
          }
        }
      },
      mounted() {
        $(this.$el)
          .chosen({
            inherit_select_classes: true,
            width: '30%',
            disable_search_threshold: 999
          })
          .change((ev) => {
            this.proxyValue = ev.target.value;
          });
      },
      updated() {
        $(this.$el).trigger('chosen:updated');
      }
    }
  }
});

setTimeout(() => { vm.cities.push({text: 'Houston', value: 'Worth it'}); }, 1000);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.proto.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id='search-results'>
  Vue model value
  <br> {{city | json}}
  <hr> Select value:
  <chosen-select v-model="city">
    <option v-for="item in cities" :value="item.value">{{item.text}}</option>
  </chosen-select>

  <select v-model="city">
    <option v-for="item in cities" :value="item.value">{{item.text}}</option>
  </select>
</div>

【讨论】：