[Vue 警告]：渲染错误：“TypeError：无法读取属性 'paid' of null”答案

【问题标题】：[Vue warn]: Error in render: "TypeError: Cannot read property 'paid' of null"[Vue 警告]：渲染错误：“TypeError：无法读取属性 'paid' of null”
【发布时间】：2018-12-29 10:53:43
【问题描述】：

我要去一个数组的 foreach 循环。当我尝试获取密钥时，它显示错误。

如果我显示整个原始数组，它会显示所有数据。

<span v-for="bal in ballance">
     <b >
       {{bal}}
      </b>
 </span>

//它显示

{ "id": 3, "user_id": 2, "party_id": 7, "doc_no": "tck7nb", "bill_no": "123", "paid": 50, "ballance": 50, "remarks": "erer"}
{ "id": 4, "user_id": 2, "party_id": 7, "doc_no": "tck7nb", "bill_no": "123", "paid": 50, "ballance": 50, "remarks": "erer"}

但是如果像下面这样，它会给我标题中提到的错误

 <span v-for="bal in ballance">
    <b >
      {{bal.paid}}
    </b>
   </span>

如何解决这个问题

【问题讨论】：

标签： javascript arrays vue.js

【解决方案1】：

检查以确保bal 不是falsy：

<span v-for="bal in ballance">
  <b v-if="bal">
    {{bal.paid}}
  </b>
 </span>

我的假设是数组中有一个空条目，这会导致问题，因此在使用它的道具之前检查 bal 是否有效是明智的。

您甚至可以在 span 上执行此操作，例如：<span v-for="bal in ballance" v-if="bal">

【讨论】：

是的，这就是问题