как передать массив объектов реквизита в vue. js?

Question

компонент: 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>

Вот как я использую вышеуказанный компонент в приложении. vue

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

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

Когда я использую его с этим массивом ,

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

элементы списка отображаются ожидаемым образом (1. 2.). Но когда я использую его с этим массивом

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

, я получаю сообщение об ошибке. Чего мне не хватает?

Ошибки:

  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     

Answer 1

Вы закрываете атрибут открывающими кавычками внутри объекта

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

Хотя лучшим решением было бы сохранить массив в данных объекта, а затем связать его (разделение логические части)