javascript - Vue 2 - v-for 循环对象数组给出不同的结果

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 !== 未定义
• typeof argument.list_item !== '未定义'
• typeof arugment.list_item !== typeof undefined