关于 vue v-for 循环的问题

[duzhihao]

vue 文档上说由于 es5 的限制不能数组的变化但是对数组的方法做了包裹 比如 splice

https://jsfiddle.net/4kg25ovt/2/

今天用了一下，发现在项目中使用 splice()不能更新视图了，必须再来个 this.$forceUpdate()， 代码如下，

 this.pagaData.questionDetails.splice(index, 1)
 

和绑定的 key 相关吗？有没有大佬给点意见和看法

[duzhihao]

这是一个双循环的数组
```html

<div
v-for="(value, index) in pagaData.questionDetails"
:key="index"
class="mb15"
>
<div class="mb10">
<div v-for="item in columnDetails.otherOption" :key="item.label" class="flex wrap mb10">
<span class="label">{{item.label}}：</span>
<div v-html="value[item.prop]"></div>
</div>
<div class="flex wrap mb10" v-for="v in value.details" :key="v[columnDetails.details.name]">
<span class="label">{{v[columnDetails.details.name]}}：</span>
<div v-html="v[columnDetails.details.content]"></div>
</div>
</div>
<el-button size="mini" @click="editOption(index)">编辑</el-button>
<el-button size="mini" @click="deleteOption(index)">删除</el-button>
</div>

```
```js
deleteOption (index) {
this.pagaData.questionDetails.splice(index, 1)
// this.$forceUpdate()
}
```

[duzhihao]

这个问题解决了，还是文档上那句话

> 如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事

原来是 this.pageDate.questionDetailss 是直接赋值的。所有他的更新不会影响视图（ push 竟然可以）

[riemannhas]

数据更新建议通过 vuex 状态管理来处理 而不是直接操作

[hanzichi]

@duzhihao 按理说 push 和 splice 效果应该是一样的，push 可以，我猜测可能是动了其他数据，带动了视图更新