[SOLVED] Bidirectional v-model.sync not working

this is the correct code:

First component:

<template>
    <span >
        ConsensoPrivacy:{{consensoPrivacy}}
        <consenso-component
            v-bind:consensoPrivacy.sync="consensoPrivacy"
        />
    </span>
</template>
<script>

import ConsensoComponent from './components/consensoComponent.vue';
export default {
  components: { ConsensoComponent },
    name : 'MainComponent',   
    data() {
        return {
            consensoPrivacy:false,
        }
    },
    
}
</script>

and the second component:

<template>
    <div class="base">
        ConsensoComponent.consensoPrivacy:{{consensoPrivacy}}
        <input type="checkbox" v-model="localConsensoPrivacy">
    </div>
</template>
<script>

export default {
    name : 'consensoComponent',   
    props:{
        consensoPrivacy:Boolean,
    },
    watch:{
        localConsensoPrivacy: function(newval,oldval){
            console.log("consensoComponent - dati watched . newval="+newval+" oldval="+oldval);
            this.$emit('update:consensoPrivacy', this.localConsensoPrivacy); //this is the solution
        }
    },
    data() {
        return {
            localConsensoPrivacy:false,
        }
    },
   
}
</script>

And this is the original query

Hi all,
I have two components and I need to have a bidirectional v-model.sync, but I’m not able to do it.
First component:

<template>
    <span >
        ConsensoPrivacy:{{consensoPrivacy}}
        <consenso-component
            v-bind:consensoPrivacy.sync="consensoPrivacy"
        />
    </span>
</template>
<script>

import ConsensoComponent from './components/consensoComponent.vue';
export default {
  components: { ConsensoComponent },
    name : 'MainComponent',   
    data() {
        return {
            consensoPrivacy:false,
        }
    },
    
}
</script>

and the second component:

<template>
    <div class="base">
        ConsensoComponent.consensoPrivacy:{{consensoPrivacy}}
        <input type="checkbox" v-model="localConsensoPrivacy">
    </div>
</template>
<script>

export default {
    name : 'consensoComponent',   
    props:{
        consensoPrivacy:Boolean,
    },
    watch:{
        localConsensoPrivacy: function(newval,oldval){
            console.log("consensoComponent - dati watched . newval="+newval+" oldval="+oldval);
            this.consensoPrivacy=newval;
        }
    },
    data() {
        return {
            localConsensoPrivacy:false,
        }
    },
   
}
</script>

but I receive this error:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "consensoPrivacy"

I’m strugglin… what is my mistake? Have you a good example please?
Thank you.
Bye.

You should emit new value to the parent component, and change consensoPrivacy in the parent component

1 Like

thank you.

Ok thank you very mutch.
The problem was that I need to emit the event from the child component.
It was solved. I edited at the top with the solution.
Thank you.

1 Like