發(fā)現(xiàn) v-for 嵌套 v-for 使用時(shí)，如果用的數(shù)據(jù)是自己組件內(nèi)部 data 里的，就沒有問(wèn)題；
但是如果用來(lái)自父組件傳遞的 props 的數(shù)據(jù)， 就會(huì)在第二層 v-for 出問(wèn)題，會(huì)渲染不出來(lái)。

想知道原因？

父組件代碼

<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: ['湖藍(lán)色']}
        ]
      }
    }
  }
</script>

<style></style>

子組件代碼

<template>
  <div id="child">
    // 使用自己組件內(nèi)部的 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>
    // 使用自己來(lái)自父組件傳遞的 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: ['湖藍(lán)色']}
        ]
      }
    },
    props: {
      specProps: Array
    }
  }
</script>
<style></style>

渲染效果如下