解决方法
使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。 还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名。
例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<span>{{numbers[index]}}</span>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: ".wrap",
data: {
numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
if (typeof(this.numbers[index]) === "undefined" ) {
this.$set(this.numbers, index, 1);
} else {
this.$set(this.numbers, index, ++this.numbers[index]);
}
}
}
});
</script>
</body>
</html>
这样，我们就可以实现最终的目的了！
第二部分
上面一部分是指在data下的数组，而如果是在store中的数组，一般可以这样：
[ADD_ONE] (state, index) {
if ( typeof state.numbers[index] == "undefined") {
Vue.set(state.numbers, index, 1)
} else {
Vue.set(state.numbers, index, ++state.numbers[index])
}
}
即使用 Vue.set() 的方式来改变、增加。
注意：这里是确定index的增加和减少，所以用 Vue.set() 的方式
减的方式如下：
[REMOVE_ONE] (state, index) {
Vue.set(state.numbers, index, --state.numbers[index]);
}
第四部分
如果是在store的actions中我们需要对stroe中的数组进行填充，方法如下：
state内容：
kindnames: []
Mutations内容：
[ADD_KIND_NAME] (state, name) {
state.kindnames.push(name);
}
注意： 这里直接使用push的方式
当然，除了push,我们还可以shift等各种方式。
actions的内容：
commit(ADD_KIND_NAME, state.items[index++].name);
这里，state.items[index++].name获取到的是一个一个的字符串。
最后，看到数据如下：
注：同样可以参考文档 --- 细节与最佳实践