javascript - 如何在 Vue 中将 v-for 索引传递给子级？

Question

我有以下父组件和子组件。在父组件中，我使用 obj.Array 和 v-for 来列出多个子组件。问题是 stuff1 和 stuff2 对于每个 child 来说都是相同的，但我需要为每个 child 获取 obj.array 的每个元素。这样做的正确方法是什么？谢谢

父级:

<template>
  <div>
    <child v-bind:obj="obj" v-for="(arrVal, index) in obj.array" :id="index" :key="arrVal"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { stuff1: "str1", stuff2: "str2", array: ["arrVal1", "arrVal2", "arrVal3"] }
    };
  }
};
</script>

child :

<template>
  <div>
    <p>{{obj.stuff1}}</p>
    <p>------</p>
    <p>{{obj.stuff2}}</p>
    <p>------</p>
    <p>{{obj.array[index]}}</p>
  </div>
</template>

    <script>
export default {
  props: { obj: Object }
};
</script>

我想要渲染的内容:

str1 ------ str2 ------ arrVal1

str1 ------ str2 ------ arrVal2

str1 ------ str2 ------ arrVal2

Answer 1

试试这个:

<template>
  <div v-for="val in obj.array">
    <p>{{obj.stuff1}}</p>
    <p>------</p>
    <p>{{obj.stuff2}}</p>
    <p>------</p>
    <p>{{val}}</p>
  </div>
</template>

    <script>
export default {
  props: { obj: Object }
};
</script>

我的建议只是迭代子组件中的数组。