javascript - 我可以在嵌套在 'index' 中的 'v-for' 中使用 'method' 参数吗？

Question

我需要在 v-for 上使用索引但与 directive 处于同一水平本身是为了mutate显示的状态。

<template>
  <div>
    <div v-for="share in sharesPurchased()" :key="share">
      <div>
        <h4>This is some content</h4>
        <p style="border: solid 1px">{{share.count}}</p>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        shares: [
          {id: 'BMW', count: 1},
          {id: 'Ford', count: 0},
          {id:'Apple', count: 10}
        ]
      }
    },
    methods: {
      sharesPurchased() {
// I want to use this at the v-for level to limit content view
      }
    }
  }
</script>

我想限制本次迭代中显示的内容，因此我只显示带有 count > 0 的内容即:shares[i].count > 0

按照上述我的意图的结果应该是 <p style="border: solid 1px">{{share.count}}</p>仅显示1仅this.shares[0].count是 >然后0

Answer 1

更新:根据您的使用需要，这显然是一个 X-Y 问题。您应该改用计算属性:

computed: {
    filteredSharesByCount: function() {
        return this.shares.filter(share => share.count > 0);
    }
}

然后您可以在模板中引用它:

<小时/>

过时的答案:

index is accessible as the second optional argument在 v-for 绑定(bind)中:

v-for also supports an optional second argument for the index of the current item.

即:

<div v-for="(share, idx) in sharesPurchased(shares)" :key="share">

然后，在循环中，如果您希望方法能够访问索引，则只需使用 idx 即可。