Question

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

2021-05-27

2259

javascript vue.js

我是 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}"/>

此处， 结果 为

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

我没有获取值“foo2”和“bar2”，而是收到错误： 预期数组获取对象

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

Answer 1

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

Answer 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"/>