使用计算或方法获取 v-for 中的索引

Question

我想知道是否可以在 vue 中直接在 v-for 中获取对象数组的索引，并将此值传递给计算属性或方法，类似于此处，甚至计算属性

<div v-for="(object, index) in objects(index)"></div> 

methods: {
   objects(index){
    const categoryId = Object.keys(this.data);
    return this.data[categoryId[index]].extras;
   } 
}

我需要索引，因为它更方便return 根据定义的键获得正确的值，有什么方法可以实现吗？

Answer 1

使用计算值转换数据并对其进行循环。我不确定你的 this.data 是什么样子，但像这样的东西应该可以工作（根据你的需要调整它）：

<div v-for="object in computed_objects"></div> 

computed: {
   computed_objects(){
    return Object.keys(this.data).map(categoryId => this.data[categoryId].extras)
   } 
}

Answer 2

您可以在 v-for 指令创建的每个元素上绑定一个方法调用，例如，每当用户单击 <li> 元素时，它将获得被点击项目的索引：

new Vue({
  el: '#app',
  data: {
    clickedIndex: null,
    weekDays: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday']
  },
  methods: {
    handleClick(i) {
      this.clickedIndex = i;
    }
  }
})

Vue.config.productionTip = false;
Vue.config.devtools = false;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(day,i) in weekDays" v-on:click="handleClick(i)">{{day}}</li>
  </ul>
  <p>Index clicked {{ clickedIndex }}</p>
</div>

使用计算或方法获取 v-for 中的索引

Get index within v-for using computed or method

methods

vue.js

computed-properties

v-for