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

【问题标题】：VueJS/Javascript: Expected array got objectVueJS/Javascript：预期的数组得到了对象
【发布时间】：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 但仍然没有得到预期的结果。有人可以帮忙吗？

【问题讨论】：

标签： javascript vue.js

【解决方案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"/>

【讨论】：