Question

我有一个组件，带有一个模板，我循环遍历一个对象数组，如下所示：

"value": [
     {"list_item": "Sed ut perspiciatis unde omnis iste natus"},
     {"list_item": "Nemo enim ipsam voluptatem quia voluptas"},
     {"list_item": "Autem vel eum iure reprehenderit qui"},
     {"list_item": "Lorem ipsum dolor"}
]

这是我在模板中循环遍历数组的部分：

 <ul v-for="argument of content.list.value">
   <li><i class="material-icons">check</i> {{ argument.list_item !== 'undefined' ? argument.list_item : argument.list-text }}</li>
 </ul>

当我从一个组件发送数据时，它工作正常，但当我尝试从另一个组件发送它时，对象数组看起来像这样：

 "list": [
     {"list-text": "Bare medlemmer ee medlemmer"},
     {"list-text": "Og ikke nok med det....."},
     {"list-text": "de er også virkelige personer"},
     {"list-text": "akkurat som deg og meg"}
  ],

我没有显示任何数据。在模板中测试时，我只显示了整个对象：

<ul v-for="argument of content.list.value">
   <li><i class="material-icons">check</i> {{ argument }}</li>
 </ul>

我明白了：

{ "list-text": "Bare medlemmer ee medlemmer" } 
{ "list-text": "Og ikke nok med det....." } 
{ "list-text": "de er også virkelige personer" } 
{ "list-text": "akkurat som deg og meg" }

如果我{{ argument.list-text }}我得到：

NaN

为什么我不能在对象中显示属性的值？

Answer 1

您获得NaN的原因是因为您正在使用此表达式：{{ argument.list-text }}。请注意，您不能在点表示法中使用-，因为它只会被评估为数学表达式，即argument.list - text。在这种情况下，由于范围中未定义argument.list和text，因此只会出现“非数字”（NaN）错误。

相反，您需要使用{{ argument['list-text'] }}。

p / s：如果要检查argument.list_item是否未定义，可以使用以下策略：

argument.list_item !== void 0
argument.list_item !== undefined
typeof argument.list_item !== 'undefined'
typeof arugment.list_item !== typeof undefined

Vue 2 - v-for循环遍历对象数组会产生不同的结果

1 个答案: