vue3 无法更改data中数据的值

毕设驿站 毕业设计 1

背景: 线上商城下订单的时候,用户选择存在localstroge中的地址。

父组件:选择地址的页面。selectAdd下的index.vue

子组件:每一个地址。(CheckBox+item地址)

我想实现只能同时选择一个地址,于是给子组件用了一个计数器count,CheckBox的值改变时触发change函数,给count加减。主要代码如下:

 <van-checkbox v-model="checked" @change="select"></van-checkbox>

data(){
            return{
                checked:false,
                count:0,
            }
        },

        methods:{
            select(checked){
                if (checked){
                    this.count+=1;
                }
                else{
                    this.count-=1;
                }


            }
        },

我确定每次改变都会触发select函数,并且都执行了对count的操作,但是结果不会保存。

举个例子:选择了第一个地址输出是this.count=1,选择第二个地址输出还是this.count=1,并且调试时发现,在第二次执行this.count+=1;之前,this.count的值为0。减法也是。

我在很多地方都这样用了data都可以,只有这里data里面的值无法改变,很奇怪。

回复

共2条回复 我来回复
  • 毕设小屋
    这个人很懒,什么都没有留下~
    评论

    为什么 data 是一个函数,去返回一个新的对象?

    原因就是在每个组件实例化的时候可以调用并返回独立的属于组件实例自身的 data,因此多个相同子组件中的 data 是独立的,要么把他放到父组件计算,要么放到状态管理器中共享,类似 vuex,也可以自己实现 Provider 。

    0条评论
  • 源码工厂
    这个人很懒,什么都没有留下~
    评论

    子组件每次调用都初始化数据,所以一直是0,当选中子组件将选中状态返回给父组件,让父组件来计数,共组件在不同地方调用数据是不互通的,不然怎么复用。

    0条评论

发表回复

登录后才能评论