我想在 v-for 标签中设置一个自定义属性，作为下面的代码，但我如何在“计算”方法中获得这个 prop

Question

我想在 v-for 标签中设置一个自定义属性，作为下面的代码，但我如何在computed方法中获得这个 prop？

如何在此处获取自定义道具"数据索引"？因为我想按索引为每个项目单独设置类。我试过$attrs.dataIndex，$dataset.index，$dataset.dataIndex，...，但没有人工作。

<li v-for="(item, index) in dataSource" :key="index" :class="classForItem"> 
// …
</li>
computed: {
    classForItem() {
      // How can I get the custom prop 'data-index' here? Because I want to set class for every item individually by index.
      // I have tried $attrs.dataIndex, $dataset.index, $dataset.dataIndex, ..., but no one is worked.
    }
  }

Answer 1

你的问题不是很清楚，但据我所知，你想在你的计算属性中获取循环的索引。计算属性是不可能的。

如果要获取索引，则必须将计算属性 ClassForItem 移动到"方法"对象中，并将"index"作为参数发送，如下所示：

<li v-for="(item, index) in dataSource" :key="index" :class="classForItem(index)"> 
// …
</li>
methods: {
    classForItem(index) {
      console.log(index)
    }
  }

或者，如果要访问数据集元素，可以使用：

<li v-for="(item, index) in dataSource" :key="index" :class="classForItem"> 
// …
</li>
methods: {
    classForItem(event) {
       console.log(event.target.dataset.index)
    }
  }