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
        },
        {
          id: 2,
          name: 'Hot Sauce',
          quantity: 5
        },
        {
          id: 3,
          name: 'Salad',
          quantity: 1
        },
     ...