javascript - 如何将 v-for 索引传递给 Vue 中的子级?
问题描述
我有以下父子组件。在我使用obj.Array
withv-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>
我的建议只是迭代子组件中的数组。
推荐阅读
- autocomplete - PHP、JS 和 CSS 自动完成在 vs 代码中很糟糕……为什么?
- python-3.6 - PubNub Tornado 对象初始化引发异常
- multithreading - 使用 compute() 在不同线程中转换图像会杀死隔离
- python - 导入数据集时语法无效
- ios - 金属中的纹理使用
- python - 练习 - 帮助调试嵌套列表理解
- python - discord.py - 如何添加踢/禁止原因?
- c++ - 如何使用 WinDBG 检查进程上下文之外的转储,并获得正确的调用堆栈
- python - 在python中的excel中查找和替换单元格
- java - 如何在 Java 中读取 CSV 文件,然后通过 AES 算法加密