在组件上使用 v-for

 

如果你还没了解组件的内容，可以先跳过这部分。

 

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

 

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

 

<my-component

  v-for="(item, index) in items"

  :item="item"

  :index="index"

  :key="item.id"

></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

 

下面是一个简单的 todo 列表的完整例子：

 

实例

<div id="todo-list-example">

  <form v-on:submit.prevent="addNewTodo">

    <label for="new-todo">Add a todo</label>

    <input

      v-model="newTodoText"

      id="new-todo"

      placeholder="E.g. Feed the cat"

    />

    <button>Add</button>

  </form>

  <ul>

    <todo-item

      v-for="(todo, index) in todos"

      :key="todo.id"

      :title="todo.title"

      @remove="todos.splice(index, 1)"

    ></todo-item>

  </ul>

</div>