CODEWITHSUNDEEP
typescriptvue.jsproptwo-way-binding
Mangesh Daundkar
Mangesh Daundkar

Reputation: 1046

Vue Cli 3 -typescript how to use @Prop() with two way binding?

My source code is:

Child Component:

<template>
  <v-snackbar
    v-model="showSnackbar"
    :bottom="y === 'bottom'"
    :left="x === 'left'"
    :multi-line="mode === 'multi-line'"
    :right="x === 'right'"
    :timeout="timeout"
    :top="y === 'top'"
    :vertical="mode === 'vertical'"
  >
    {{ text }}
    <v-btn
      color="pink"
      flat
      @click="showSnackbar = false"
    >
      Close
    </v-btn>
  </v-snackbar>
</template>

export default class AliUMSSnackbar extends Vue {
  @Prop() private showSnackbar!: Boolean;
}

Parent component:

<ali-snackbar v-bind:showSnackbar="showSnackbar"></ali-snackbar>

But on clicking Close button, getting 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: "showSnackbar"'

Upvotes: 0

Views: 1360

Answers (1)

Ana Liza Pandac
Ana Liza Pandac

Reputation: 4861

If you are using Vue 2.3.0+, you can use the .sync modifier to have a "two-way binding" for a prop.

This can be done by emitting events in the pattern of update:myPropName.

So in your child component, update the prop on button click by doing this.

<v-btn color="pink" flat @click="() => this.$emit('update:showSnackbar', false)">Close</v-btn>

And modify your parent component to the one below so it can listen to the emitted event and update a local data property which is showSnackbar.

<ali-snackbar v-bind:showSnackbar.sync="showSnackbar"></ali-snackbar>

Upvotes: 1

Related Questions