JZTXT

Vue易错点收集

发布时间 2023-05-25 11:15:16作者: 清安宁

易错点解析

  • 遍历嵌套数据:外层套里层,外层的数据得先有,由于里层的数据依赖外层,才能继续渲染
- 数据格式类似这样:

	[
        {
            id:1
            name:'xxx'
            categoryChild:[...] // 继续上面的套路,包裹一个个对象,里面再包裹[]...
        }
        {...}
        {...}
    ]
    
- 结构如下:

	<!--第一层-->
<div class="item" v-for="(item1,index) in categoryList" :key="item1.categoryId">
  <h3>
    <a href="">{{item1.categoryName}}</a>
  </h3>
  <div class="item-list clearfix"><!--第二层-->
    <div class="subitem" v-for="(item2,index) in item1.categoryChild" :key="item2.categoryId">
      <dl class="fore">
        <dt><!--第二层遍历不能写这,写这就和第三层平级,导致第三层数据无法遍历出来-->
          <a href="">{{item2.categoryName}}</a>
        </dt>
        <dd>
          <!--第三层遍历-->
          <em v-for="(item3,index) in item2.categoryChild" :key="item3.categoryId">
            <a href="">{{item3.categoryName}}</a>
          </em>
        </dd>
      </dl>
    </div>
  </div>
</div>