Vue.js vue中的列表渲染

我正在vue中浏览购物车项目列表，需要获取每个项目的索引。我以为你会这么做

  <ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="lineItem.key">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>

lineItems中的（lineItem，index）：key=“lineItem.key”>

及

{{formatMoney（lineItem.line_Price）}

但这没有显示，我得到了错误

---

[Vue warn]：属性或方法“索引”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：。

我假设这条线

{{formatMoney（lineItem.line_Price）}

是PushCartItem组件，因此为了接收

索引

属性，您需要使用道具，否则您无法访问它，如下所示：

<template>
  <p class="crt-PushItem_Price">
    <span class="money" :data-line-index="index">
      {{ formatMoney(lineItem.line_price) }}
    </span>
  </p>
</template>
<script>
export default {
  name: 'PushCartItem',
  props: {
    index: {
      type: Number,
      required: true
    },
    lineItem: {
      type: Object,
      required: true,
    }
  },
  methods: {
    formatMoney(price) {
      // do something with the price
    }
  }
}
</script>

{{formatMoney（lineItem.line_price）}

导出默认值{
名称：“PushCartItem”，
道具：{
索引：{
类型：数字，
必填项：true
},
行项目：{
类型：对象，
要求：正确，
}
},
方法：{
货币（价格）{
//对价格做点什么
}
}
}

---

此答案基于我的假设，如果您仍然存在错误，请提供更多信息或详细信息以帮助您。

您需要像这样从父组件传递索引

<ul class="crt-Push_Items">
<li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="lineItem.key">
  <PushCartItem :lineItem="lineItem" :index="index" />
</li></ul>

lineItems中的（lineItem，index）：key=“lineItem.key”>

试试这个：

<ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem) in lineItems" :key="lineItem.key">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>

lineItems中的（lineItem）：key=“lineItem.key”>

或者这个：

<ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="index">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>

lineItems中的（lineItem，index）：key=“index”>

this:

data line index=“{{index}}”

看起来不像vue。你的意思是不是说，数据行index=“index”@ThomasKuhlmann fair point，即使我刚刚做了

{{formatMoney（lineItem.line_Price）}}{{index}}

它仍然不起作用试着从

v-for=。。。在…

到

v-for=。。。属于…

。如果这不起作用，你能展示整个代码吗？

<ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="index">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>