Question

我有一个由v-for生成的选择，因此它有一个索引，我想在用户选择时获取该选择的索引，因此我可以在函数中使用它，我该怎么办这个吗？

我看过几本教程，但是我无法解决它，如果我可以将索引作为全局变量，它也会解决它，因为那样我就可以获取变量并在函数内部使用

<label for="userSelect">Selecione o usuario</label><br>
<select name="userSelect" id="userSelect" class="custom-select">
<option :value="user._id" @change="takeProperty" v-for="(user,index) in getUser" :key="index" >{{  user.nome  }}</option>
</select><br>
<label for="userSelect">Selecione a propriedade que ele terá acesso</label><br>
<input type="radio" v-for="(property,j) in listProperty" :key="j">Teste<br>

takeProperty: function(index){
   console.log(index) <= returns undefined
}

我希望能够随着用户选择其他选项而检索选择的索引

Answer 1

这是处理此问题的一种方法。首先，您需要将@change事件处理程序移至<select/>元素。然后，您可以使用特殊的$event变量来获取所选选项（selectedIndex）的索引。尽管这不是v-for循环中的index变量，但该值应该相同。

这是更新的代码：

<select name="userSelect" id="userSelect" class="custom-select" @change="takeProperty($event.target.selectedIndex)">
  <option :value="user._id" v-for="(user,index) in getUser" :key="index" >{{  user.nome  }}</option>
</select>

Answer 2

您可以直接阅读selectedIndex属性

new Vue({
  el: '#app',
  data: {
    users: [{_id: 1, name: "user 1"}, {_id: 2, name: "user 2"}]
  },
  methods: {
    onChange(event) {
      console.log("index is " + event.target.selectedIndex)
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select @change="onChange">
    <option v-for="user in users" :value="user._id">{{user.name}}</option>
  </select>
</div>

捕获v-for循环的索引并将索引传递给函数

2 个答案: