VueJS：你如何为@change处理程序提供上下文变量？

Question

我在循环中有一个)小部件：

select

当触发handleChange时，我想获得以下信息：

1. <div v-for="(item, index) in items" :key="index"> <select @change="handleChange"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </div> 父循环
2. index所选选项

上面的代码只给了我＃2。我如何获得＃1？

Answer 1

有几种方法可以做到这一点：

解决方案1：将index绑定到任意HTML5 data-属性

此方法涉及在select元素上使用:data-index="index"，然后使用e.target.dataset.index检索元素的绑定index

new Vue({
  el: '#app',
  data: {
    items: ['lorem', 'ipsum', 'dolor', 'sit', 'amet']
  },
  methods: {
    handleChange(e) {
      console.log(e.target.value, e.target.dataset.index);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <select @change="handleChange" :data-index="index">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
</div>

当然，您可以将index存储为任何其他任意命名的data-属性，例如<select @change="handleChange" :data-abc="index">然后只需使用e.target.dataset.abc在您的JS中访问它。

解决方案2：将index作为参数传递给@click回调

此方法涉及将$event和index作为参数传递给handleChange回调。 {{3}}：

new Vue({
  el: '#app',
  data: {
    items: ['lorem', 'ipsum', 'dolor', 'sit', 'amet']
  },
  methods: {
    handleChange(e, idx) {
      console.log(e.target.value, idx);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <select @change="handleChange($event, index)">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
</div>

Answer 2

表示父循环索引，

<select @change="handleChange(index)">

对于所选选项的值，使用 v-model 进行双向绑定