vue中的列表渲染答案

【问题标题】：List rendering in vuevue中的列表渲染
【发布时间】：2021-06-22 05:19:30
【问题描述】：

我正在浏览 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>

和

<p class="crt-PushItem_Price"><span class="money" data-line-index="{{ index }}">{{ formatMoney(lineItem.line_price) }} </span></p>

但这没有显示，我收到了错误 [Vue 警告]：属性或方法“索引”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

【问题讨论】：

这个：data-line-index="{{ index }}" 看起来不像 vue。你不是说:data-line-index="index"
@ThomasKuhlmann 公平点即使我只是做了
{{ formatMoney(lineItem.line_price) }} {{ index } }
还是不行
尝试从v-for=... in ...切换到v-for=... of ...。如果这不起作用，你能显示整个代码吗？

标签： vue.js

【解决方案1】：

试试这个：

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

或者这个：

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

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

【解决方案3】：

我假设这条线

<p class="crt-PushItem_Price"><span class="money" data-line-index="{{ index }}">{{ formatMoney(lineItem.line_price) }} </span></p>

是PushCartItem组件，所以为了接收index属性，你需要使用props，否则你无法访问它，像这样：

<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>

这个答案是基于我的假设，如果你仍然有错误，请给我更多的信息或细节来帮助你。

【讨论】：