达拉~ 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日

悬赏问题

  • ¥30 求一下解题思路,完全不懂。
  • ¥30 关于#硬件工程#的问题:求一下解题思路
  • ¥15 运筹学对偶单纯行法构造扩充问题
  • ¥20 XP系统的老电脑一开机就提示找不到rundll.exe,付费求解
  • ¥15 milvus查询出来的score怎么转换成0-1之间的相似性
  • ¥15 多ip服务器站群如何搭建l2tp服务器
  • ¥15 lvgl V9移植到linux开发板
  • ¥15 VB.net中在窗体中创建一个button控件来关闭窗体,但是提示错误,我该怎么办
  • ¥15 网上下载好的程序但是arduinoIDE编程报错,运行不了,哪里出错了,能具体给改一下吗
  • ¥15 Sharepoint JS开发 付费技术指导