Vuejs 指令绑定模型

Posted 2023-05-07

【中文标题】Vuejs 指令绑定模型

【英文标题】：Vuejs directive binding a model

【发布时间】：2017-05-05 19:46:52

【问题描述】：

我正在使用 Vuejs 1.0 指令将选择字段（单个和多个）转换为 Select2 jQuery 插件字段。

Vue.directive('select2', 
    twoWay: true,
    priority: 1000,

    params: ['max-items'],

    bind: function () 
        var self = this;
        console.log(self.params);

        $(this.el)
            .select2(
                maximumSelectionLength: self.params.maxItems,
                theme: 'bootstrap',
                closeOnSelect: true
            )
            .on('change', function () 
                var i, len, option, ref, values;
                if (self.el.hasAttribute('multiple')) 
                    values = [];
                    ref = self.el.selectedOptions;
                    for (i = 0, len = ref.length; i < len; i++) 
                        option = ref[i];
                        values.push(option.value);
                    
                    return self.set(values);
                 else 
                    return self.set(self.el.value);
                
            )
    ,
    update: function (value, oldValue) 
        $(this.el).val(value).trigger('change')
    ,
    unbind: function () 
        $(this.el).off().select2('destroy')
    
);

这一切都很好。我也在尝试将模型绑定到字段的值，但似乎无法正确绑定。

<select class="form-control" name="genre" v-model="upload.genre" v-select2="">
<option value="50">Abstract</option>
<option value="159">Acapella</option>
<option value="80">Acid</option>
...
</select>

upload.genre 属性不会自动更新。

【参考方案1】：

v-model 实际上是传递道具和更改事件设置值的语法糖，因此如下：

<input v-model="something">

等价于

<input v-bind:value="something" v-on:input="something = $event.target.value">

你也必须做类似的改变，你可以在vue团队提供的select2例子中看到这个类型代码。

  .on('change', function () 
    vm.$emit('input', this.value)
  )

使用 Vue 1.0

当您使用 vue 1.0 时，有一个 two-way 选项用于帮助将数据写回 Vue 实例的指令，您需要传入 twoWay: true。此选项允许在指令中使用 this.set(value)：

Vue.directive('select2', 
  twoWay: true,
  bind: function () 
    this.handler = function () 
      // set data back to the vm.
      // If the directive is bound as v-select2="upload.genre",
      // this will attempt to set `vm.upload.genre` with the
      // given value.
      this.set(this.el.value)
    .bind(this)
    this.el.addEventListener('input', this.handler)
  ,
  unbind: function () 
    this.el.removeEventListener('input', this.handler)
  
)

在 html 中：

<select class="form-control" name="genre" v-select2="upload.genre">

【讨论】：

感谢您的回答。我没有提到我正在使用 Vuejs 1.0，而且我也在使用指令而不是组件。还能做吗？

感谢您的回答。如果你能再次帮助我。我已经使用了您的代码，并且在提供模型时效果很好，但是如果没有提供模型并且选择列表已经具有选定项，则它不起作用。它总是使用模型值来设置 select2 列表值 - 这是小提琴 - jsfiddle.net/4r36a1s1 - 感谢帮助。

@Wasim 您必须在指令中的update 中提供初始值，请参阅此fiddle，我现在已经硬编码，它也可以传递。