CODEWITHSUNDEEP
vue.jsvuejs2
user7331530
user7331530

Reputation: 975

how to pass array of object props in vue.js?

component: ToDo.vue:

<template>
    <ol>
      <li v-for="toDo in toDos" :key="toDo.id">{{ toDo.text }}</li>
    </ol>
</template>

<script>
export default {
  name: "ToDo",
  props: {
    toDos: Array
  },
};
</script>

This is how I am using above component in App.vue

<template>
  <div id="app">
    <ToDo v-bind:toDos="[234, 263]"></ToDo>
  </div>
</template>

export default {
  name: "App",
  components: {
    ToDo
  }
};
</script>

When I use it with this array, 

<ToDo v-bind:toDos="[234, 263]"></ToDo>

list items are displayed as expected (1. 2.). But when I use it with this array 

<ToDo v-bind:toDos="[{ id: 0, text: "item 1" }, { id: 1, text: "item 2" }]"></ToDo>

I get error. What am I missing?

Errors:

  4:11  error    'v-bind' directives require an attribute value                           

                                                     vue/valid-v-bind
  5:20  error    Parsing error: Unexpected end of expression                              

                                                     vue/no-parsing-error
  5:21  error    Parsing error: missing-whitespace-between-attributes                     
                                                                                                                                               vue/no-parsing-error
  5:27  error    Parsing error: unexpected-character-in-attribute-name                                                                                                                                                                   vue/no-parsing-error
  6:20  error    Parsing error: unexpected-character-in-attribute-name                                                                                                                                                                   vue/no-parsing-error
  6:27  error    Parsing error: unexpected-character-in-attribute-name                                                                                                                                                                   vue/no-parsing-error
  7:2   error    Parsing error: unexpected-character-in-attribute-name

Upvotes: 0

Views: 2125

Answers (1)

Jason
Jason

Reputation: 732

You're closing the attribute with the opening quotation marks inside the object

<ToDo v-bind:toDos="[{ id: 0, text: 'item 1' }, { id: 1, text: 'item 2' }]" />

Although a better solution would be to hold the array in the data of the object, then bind to that (separation of logical parts)

Upvotes: 1

Related Questions