javascript - [Vue 警告] : Error in render: "TypeError: Cannot read property ' paid' of null"

Question

我要进入数组的 foreach 循环。当我尝试获取 key 时，它显示错误。

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

<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>

如何解决这个问题

Answer 1

检查以确保 bal不是 falsy :

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

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

您甚至可以在 span 上完成相反，像:<span v-for="bal in ballance" v-if="bal">