directive: v-for_mutation2

by edith_tang

HTML

<div id="app">
  <button @click="filterBooks">
    Find Garbriel's Works
  </button>
  <button @click="addBook">
    Add a Book
  </button>
  <ul>
    <li v-for="(book, index) in books">
      {{ index + 1 }} - "{{ book.name }}" by {{ book.author }}
    </li>
  </ul>
</div>

CSS

button {
  border: none;
  background-color: pink;
  color: #fff;
  padding: 5px 10px;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	books: [
    	{
      	name: 'Love in the time of cholera',
        author: 'Gabriel García Márquez'
      },
      {
      	name: 'Wuthering Heights',
        author: 'Emily Bronte'
      },
      {
      	name: 'Becoming',
        author: 'Michelle Obama'
      },
      {
      	name: 'One Hundred Years of Solitude',
        author: 'Gabriel García Márquez'
      }
    ]
  },
  methods: {
  	filterBooks: function() {
    	this.books = this.books.filter(
      	function(item) {
        	return item.author.match(/Gabriel/);
        }
      )
    },
    addBook: function() {
    	Vue.set(this.books, 4, {
      	name: 'Jane Eyre',
        author: 'Charlotte Bronte'
      })
    }
  }
})