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

Question

我是 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

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

标签： javascriptvue.js

Answer 1

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