v-for无法读取prop数据

使用computed属性计算出需要循环的数据

例如，如果需要在父组件中通过props传递一个数组数据给子组件，并在子组件中使用v-for循环遍历该数组，但是发现无法读取到这个数据，则可以通过以下方法解决：

// 父组件中的模板代码 <template> <div> <child-component :list="dataArray" /> </div> </template>

<script> export default { data() { return { dataArray: ['a', 'b', 'c'] } } } </script>

// 子组件中的模板代码 <template> <div v-for="item in computedList" :key="item"> {{ item }} </div> </template>

<script> export default { props: { list: { type: Array, required: true } }, computed: { computedList() { // 这里使用了slice方法，是为了不影响父组件中的原数组 return this.list.slice() } } } </script>

通过computed属性，将props中传递的数据转化为computed中的计算结果，再在模板中使用computed中的数据，就可以避免v-for无法读取prop数据的问题。