VueJS/Javascript: Expected array got object

Question

I'm new to vue, trying to display items inside array in the list

Vue component:

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

Page:

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

Here,the result is

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

Instead of getting the values 'foo2' and 'bar2' i am getting the error:Expected array got object

Looked at similar post and tried to parse JSON but still not getting the expected result. Can anyone please help?

Matt U · Accepted Answer · 2021-05-27 16:59:56Z

3

Just bind with v-bind:items="result". Since you wrapped the bound value in {...} you made an object literal. Just "result" will pass the array.

answered May 27, 2021 at 16:59

Matt U

5,11811 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

scar-2018 · Accepted Answer · 2021-05-27 17:01:56Z

2

Vue has a prop which can be of any data type.

Out of all data types, Object, Array should be a function for their default values.

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

And v-bind:items can already have javascript variable. so

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

answered May 27, 2021 at 17:01

scar-2018

5282 silver badges10 bronze badges

Collectives™ on Stack Overflow

VueJS/Javascript: Expected array got object

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related