为什么使用组件内部 data 的数据可以 v-for 双层嵌套，而用来自父组件的 props 里数据就不行？

Question

发现 v-for 嵌套 v-for 使用时，如果用的数据是自己组件内部 data 里的，就没有问题；
但是如果用来自父组件传递的 props 的数据， 就会在第二层 v-for 出问题，会渲染不出来。

想知道原因？

父组件代码

<template>
  <div id="parent">
    <test-v-for :specProps="specAttrs"></test-v-for>
  </div>
</template>

<script>
  import TestVFor from './TestVFor.vue'
  export default {
    name: 'parent',
    components: {TestVFor},
    data () {
      return {
        specAttrs: [
          {name: '尺码', list: [46, 47, 48, 49, 50]},
          {name: '颜色', list: ['湖蓝色']}
        ]
      }
    }
  }
</script>

<style></style>

子组件代码

<template>
  <div id="child">
    // 使用自己组件内部的 data
    <h1>v-for by own data</h1>
    <dl v-for="item in specs">
      <dt class="fs24 l">{{item.name}}</dt>
      <dd>
        <a href="javascript:;" v-for="(val, index) in item.list">
          <span>{{ val }}</span>
        </a>
      </dd>
    </dl>
    <hr>
    // 使用自己来自父组件传递的 data
    <h1>v-for by props data</h1>
    <dl v-for="item in specProps">
      <dt class="fs24 l">{{item.name}}</dt>
      <dd>
        <a href="javascript:;" v-for="(val, index) in item.list">
          <span>{{ val }}</span>
        </a>
      </dd>
    </dl>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        specs: [
          {name: '尺码', list: [46, 47, 48, 49, 50]},
          {name: '颜色', list: ['湖蓝色']}
        ]
      }
    },
    props: {
      specProps: Array
    }
  }
</script>
<style></style>

渲染效果如下

Answer 1

我完全复制粘贴了你的代码。。并没有发生你所截图的情况。

另外 你这注释的方式。。在template里不是应该遵循html的注释方式么。你看我这图里你的注释都被当成text输出了。所以你这构建环境具体怎么样的和vue版本、package乃至开发工具都最好贴出来给大家参详 避免玄学问题。。

Answer 2

自己挖的坑自己来填。我后来单独写了一个可运行的 github demo，地址为：https://github.com/Emma1075/v...

运行后发现确实没有这个问题。

后来反复排查原因，是我在项目中父组件里的数据处理出了问题。第二层嵌套的 list 应该是一个数组，我父组件处理list元素重复值时用了 new Set() 来去重，去重后忘记了把 Set 格式转换回 Array。

所以导致在我自己项目里第二层list v-for 渲染不出来。

解决方法：list: [...new Set(tempArr)]