javascript - [Vue警告]:渲染错误:“TypeError:无法读取属性'paid'为null”

我要去数组的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>

如何解决这个问题

最佳答案

检查以确保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">