关于 vue v-for 循环的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1856 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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


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

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

4 条回复 • 2019-10-12 17:34:05 +08:00

duzhihao

2019-10-12 11:36:32 +08:00

这是一个双循环的数组
```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

2019-10-12 13:48:57 +08:00

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

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

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

riemannhas

2019-10-12 17:25:15 +08:00

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

hanzichi

2019-10-12 17:34:05 +08:00

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