达拉~ 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 三因素重复测量数据R语句编写,不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表