解决vue通过索引值修改数组中的元素页面不改变的问题

根本原因：不能通过索引值 !

vue为了更加简洁，内部没有监听通过索引值来改变数组，虽然data被更改，但是View层不会发生变化，也就是说当data的数据是数组或者对象时，动态的添加或删除，视图将不会更新。

解决办法1：

如果是插入或者删除可以通过数组的splice方法

this.letters[0]='b'
//替换成
this.letters.splice(0,1,'b')

解决办法2：

插入或者删除也可以使用Vue的set方法

本质上：使用set方法后其实爷是调用了Vue数组中的splice，所以触发了渲染。（这一点可以看vue源码）

this.letters[0]='b'
//替换成

import Vue from 'vue'
Vue.set(this.letters,0,'b')

Vue.set (要修改的数组/对象，索引值/属性，修改后的值）


//如果不想引入import Vue,也可以用this.$set
this.$set(this.letters,0,'b')

vue.set和this.$set() 这两个方法其实是差不多的，可以说几乎是一样的，只不过set是绑定在Vue构造函数上，需要引入，$set（）是绑定在Vue原型上的，不需要引入。