Question

我在v-for中有一个自定义指令。我需要将$ index的值传递给custom指令，以便能够将datepicker值保存在数组中（每个产品有一个日期）。 $ index在数组中总是有一个未定义的值。

   <tr v-for="result in results">
      <td>
           <input v-model="shoppingCart[$index].productStartDate" type="text" v-datepicker='shoppingCart[$index].productStartDate'>
      </td>

问题是字符串$ index是自定义指令的内容。

客户指令：

 Vue.directive('datepicker', {

        bind: function () {
            var vm = this.vm;
            var key = this.expression;
            $(this.el).datepicker({
                onSelect: function (date) {
                    vm.$set(key, date);
                }
            });
        },
        update: function (val) {
            $(this.el).datepicker('setDate', val);
        }

    });

我已经尝试使用this.arg将refence传递给$ index并且找不到传递闭包来获取值的方法，但是两者都没有用，我一定做错了什么？

Answer 1

对于Vue.js 2.x，他们建议使用数据集传递值所以你可以添加：data-index =＆＃34; index＆＃34;在HTML元素中，并在指令中抓住它：

＆＃13;

Vue.directive('yourDirective', {
  bind: function (el, binding, vnode) {
    console.log('index of element', el.dataset.index); 
  }
}

＆＃13;

<div 
  v-yourDirective
  v-for="(test,index) in tests" 
  :data-index="index"
>
  
</div>

＆＃13;

使用$ index of v-for的自定义指令

1 个答案: