达拉~ 2022-09-25 23:33 采纳率: 64.7%
浏览 14
已结题

vue使用过滤后赋值给data中的数据出现无限循环

计算总价是由total函数的返回值决定的,将过滤出来符合条件的赋值给data中的另一个变量,就会出现栈溢出,但是如果不声明newarr这个变量,就不会报错,希望得到解答


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .disable {
        opacity: 0.5;
        pointer-events: none;
    }
</style>

<body>
    <div id="app">
        <table>

            <tr v-for="(item,index) in itemlist" ::key="item.num">
                <td><input type="checkbox" v-model="item.check"></td>
                <td>
                    <button @click="nums(-1,index)">-</button>
                    {{item.num}}
                    <button @click=nums(1,index)>+</button>
                </td>
            </tr>
        </table>
        <div>总价{{total()}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                itemlist: [{
                    num: 1,
                    price: 10,
                    check: false,
                }, {
                    num: 1,
                    price: 11,
                    check: false,
                }, {
                    num: 1,
                    price: 121,
                    check: false,
                }],
            
                newarr: []//如果把他注释,就不会报错
            },
            methods: {
                nums(a, index) {
                    this.itemlist[index].num += a
                },
                total() {
                    this.newarr = this.itemlist.filter(items => {
                        return items.check
                    })
                    let aa = 0
                    this.newarr.forEach(item => {
                        aa += item.price * item.num
                    })
                    return aa
                }
            },
        })
    </script>
</body>

</html>

  • 写回答

1条回答 默认 最新

  • MAXLZ 2022-09-26 00:54
    关注

    首先模板会编译成渲染函数,这个渲染函数会根据其中的响应式数据变化而执行,也就是data中的数据,由于你在模板中调用了total方法,那么就会在渲染函数中也被调用,这样就造成了total中使用到的响应式数据也可能会造成渲染函数的执行,所以newarr的变化也会引起渲染函数的重新执行。
    当开始挂载时,会调用渲染函数,进而执行total方法,total方法中因为对newarr进行了重新赋值,会重新执行渲染函数,然后就死循环了。
    如果你将newarr从data移除,那么他就不是个响应式数据了,他的变化自然也不会引起渲染函数的重新执行。

    其实这种情况,total可以使用计算属性

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月4日
  • 已采纳回答 9月26日
  • 创建了问题 9月25日

悬赏问题

  • ¥15 cplex运行后参数报错是为什么
  • ¥15 之前不小心删了pycharm的文件,后面重新安装之后软件打不开了
  • ¥15 vue3获取动态宽度,刷新后动态宽度值为0
  • ¥15 升腾威讯云桌面V2.0.0摄像头问题
  • ¥15 关于Python的会计设计
  • ¥15 聚类分析 设计k-均值算法分类器,对一组二维模式向量进行分类。
  • ¥15 stm32c8t6工程,使用hal库
  • ¥15 找能接spark如图片的,可议价
  • ¥15 关于#单片机#的问题,请各位专家解答!
  • ¥15 博通raid 的写入速度很高也很低