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

Posted 2023-02-23

【中文标题】使用计算或方法获取 v-for 中的索引

【英文标题】：Get index within v-for using computed or method

【发布时间】：2018-10-31 15:07:13

【问题描述】：

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

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

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

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

【问题讨论】：

使用方法而不是计算。

没有。计算属性不能有参数

【参考方案1】：

您可以在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>

【讨论】：

我确实看到我没有很好地解释我的用例，我不需要实现点击不同元素的方法，我只需要将每个元素的索引传递给计算在对象数组中返回正确值的属性或方法

【参考方案2】：

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

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

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