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

我具有以下父级和子级组件。在父级中，我使用obj.Array和v-for列出多个子级组件。问题是每个孩子的stuff1和stuff2都相同，但是我需要为每个孩子抓取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>

儿童：

<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

最佳答案

尝试这个：

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

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

关于javascript - 如何在Vue中将v-for索引传递给子级？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56112657/