达拉~ 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 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵