VueJS/Javascript：预期的数组得到了对象

Posted 2023-02-23

【中文标题】VueJS/Javascript：预期的数组得到了对象

【英文标题】：VueJS/Javascript: Expected array got object

【发布时间】：2021-08-15 23:37:55

【问题描述】：

我是 vue 新手，试图在列表中显示数组内的项目

Vue 组件：

    <template>
        <div>
           <ul id="array-rendering">
                <li v-for="item in items" :key="item.message">
                     item.message 
                </li>
            </ul>
        </div>
    </template>
    <script>
    export default 
      props: 
        items: 
          type: [],
          default: [
             message: 'Foo' ,
             message: 'Bar' 
          ]
        ,
      ,
    
    </script>

    <style scoped>
    h4
      display: flex;
      align-items: center;
      justify-content: center;
    
    </style>

页面：

    <ErrorAlert v-bind:items="result"/>

这里是result

[
     message: "Foo2" ,
     message: "Bar2" 
];

我得到的不是值 'foo2' 和 'bar2' 而是错误：Expected array got object

查看了类似的post 并尝试解析 JSON 但仍然没有得到预期的结果。有人可以帮忙吗？

【参考方案1】：

只需绑定v-bind:items="result"。由于您将绑定值包装在 ... 中，因此您创建了一个对象文字。只需"result" 将传递数组。

【参考方案2】：

Vue 有一个可以是任何数据类型的 prop。

在所有数据类型中，Object、Array 应该是它们的默认值的函数。

export default 
  props: 
    items: 
      type: Array,
      default: () => [
         message: 'Foo' ,
         message: 'Bar' 
      ]
    ,
  ,

而v-bind:items 已经可以有javascript 变量。 所以

<ErrorAlert v-bind:items="result"/>