时间戳

首页 > 解决方案 > 有数据时才做 v-for

javascript - 有数据时才做 v-for

问题描述

所以在我的Vue中，我有以下代码

        <div v-if="titles!=null" >
          <div v-bind:key="chart.id" v-for="chart in titles.titles"> 
            <DataInfo v-bind:chart="chart" /> 
          </div>  
        </div>

在DataInfo.vue文件中我有chartI 绑定，作为道具。

我的问题是titles来自 GET 请求，所以它并不总是在页面加载后立即可用，所以在 中DataInfo.vue，chart道具也不总是可用，导致错误。

v-for仅当titles不为 null时，我如何才能执行此操作？<div v-if="titles!=null" >暂时什么都不做。

谢谢

标签： javascriptvue.js

解决方案

 <div v-if="titles" >
      <div :key="chart.id" v-for="chart in titles.titles"> 
        <DataInfo :chart="chart" /> 
      </div>  
 </div>

并声明一个数据标题设置为null，当你得到你的ajax响应时，将结果数据分配给你的titles变量

data(){
  return { 
    titles: null
  }
}

推荐阅读