Vue.js 2 Design Patterns and Best Practices

Iteration with v-for

If we have content that we'd like to repeat over a certain number, we can use v-for. This is often used to populate a template with a dataset. For example, let's say we have a list of groceries and we wanted to display this list on the screen; we could do this with v-for. We can create a new project to see this in action:

# Create a new Vue project$ vue init webpack-simple vue-for# Navigate to directory$ cd vue-for# Install dependencies$ npm install# Run application$ npm run dev

To start with, let's create an array with a list of groceries that we can display on screen. Each item has an id, name, and quantity:

<script>export default {  name: 'app',  data () {    return {      groceries: [        {          id: 1,          name: 'Pizza',          quantity: 1 }, ...