V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
duzhihao
V2EX  ›  问与答

关于 vue v-for 循环的问题

  •  
  •   duzhihao · 2019-10-12 11:07:33 +08:00 · 1495 次点击
    这是一个创建于 1854 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    duzhihao  
    OP
       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
        2
    duzhihao  
    OP
       2019-10-12 13:48:57 +08:00
    这个问题解决了,还是文档上那句话

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

    原来是 this.pageDate.questionDetailss 是直接赋值的。所有他的更新不会影响视图( push 竟然可以)
    riemannhas
        3
    riemannhas  
       2019-10-12 17:25:15 +08:00
    数据更新建议通过 vuex 状态管理来处理 而不是直接操作
    hanzichi
        4
    hanzichi  
       2019-10-12 17:34:05 +08:00
    @duzhihao 按理说 push 和 splice 效果应该是一样的,push 可以,我猜测可能是动了其他数据,带动了视图更新
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2327 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:02 · PVG 00:02 · LAX 08:02 · JFK 11:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.