如何从 select 中 v-for 中使用的对象获取索引数据

Question

我有一个涉及选择元素的组件。下面，opts 是一个对象数组。

Vue.component('atcf-select', {
    props: [
        'opts',
    ],
    data() {
        return {
            element_index: '',
        };
    },
    template: `
        <div>
            <select @change="onChange(opt,index)">
                <option v-for="(opt,index) in opts">
                    {{ opt.text }} {{opt.index}}
                </option>
            </select>
        </div>
    `,
    methods: {
        onChange(opt,index) {
            //Do something with opt and index...
        }
    }
};

问题显然是我无法获取所选的 opt 对象及其索引，并将其用作 onChange 方法的参数。获取所选选项的索引和对象的正确方法是什么？

Answer 1

您将无法将opt或index值传递给元素change上的侦听器select，因为它超出了 的范围v-for。

如果您没有为onChange处理程序指定任何参数，Vue 将隐式传递一个事件对象。从那里，您可以selectedIndex通过 获取该值e.target.selectedIndex。

这是一个例子：

new Vue({
  el: '#app',
  data() {
    return {
      opts: [
        { value: 'a', text: 'A' },
        { value: 'b', text: 'B' },
        { value: 'c', text: 'C' },
      ]
    }
  },
  methods: {
    onChange(e) {
      let index = e.target.selectedIndex;
      let option = this.opts[index];
      console.log(index, option);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
  <select @change="onChange">
    <option v-for="(opt, index) in opts" :key="index" :value="opt.value">
      {{ opt.text }}
    </option>
  </select>
</div>