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

时间:2018-07-21 08:16:52

标签: javascript arrays vue.js

我要转到数组的foreach循环。当我尝试获取密钥时,它显示错误。

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

<UserControl x:Class="WpfApp2.Portfolio"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup- 
   compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WpfApp2"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
  <Grid>
    <DataGrid x:Name="grid1" HorizontalAlignment="Left" Height="706" 
 Margin="27,26,-1124,-432" VerticalAlignment="Top" Width="1397"/>
    <TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="23" 
  Margin="648,574,-468,-297" TextWrapping="Wrap" Text="TextBox" 
 VerticalAlignment="Top" Width="120"/>

  </Grid>

//它显示

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

如何解决这个问题

1 个答案:

答案 0 :(得分:3)

检查以确保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">上执行此操作,例如: <tbody *ngFor="let rowData of TableData;let i=index"> <tr (click)="hideme[i] = !hideme[i]">Some Data</tr> <tr [hidden]="hideme[i]">{{getContent()}}</tr> </tbody>