passing v-model props in child component

Question

I have parent component, where I want send a boolean in child Component for show me v-dialog with overview. The result is many v-dialog that opens and a message of error in console.log of mutating. I don't know where I wrong. Can you help me? Thanks

<template>
  <div>
    <div class="container">
      <v-card
        v-for="el of listTv"
        :key="el.id"
        class="card"
        :style="{
          backgroundImage: `url('https://image.tmdb.org/t/p/w500/${el.backdrop_path}')`,
          backgroundSize: 'auto',
          backgroundPosition: 'center',
        }"
      >
        <v-card-title class="textTitle">{{ el.name }}</v-card-title>
        <h5 class="genres">
          {{ el.genres[0] === undefined ? "Nessun genere" : el.genres[0].name }}
        </h5>
        <v-btn color="primary" class="btn" @click="dialog = true"
          >Trama...</v-btn
        >
      </v-card>
    </div>
    <DialogsOverview
      v-for="element in listTv"
      :key="element.id"
      :overView="element.overview || 'Nessuna descrizione'"
      :title="element.name"
      :dialog="dialog"
    />
  </div>
</template>

<script>
import DialogsOverview from "./DialogsOverview.vue";
export default {
  components: { DialogsOverview },
  props: ["listTv"],
  data() {
    return {
      dialog: false,
    };
  },
  methods: {},
};
</script>

<style>
@import url("./style/CardsMovie.css");
</style>

Child component:

<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>{{ overView }}</v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialog: Boolean,
    overView: String,
    title: String,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style></style>

Error console

vue.runtime.esm.js?2b0e:619 [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: "dialog"

found in

---> <DialogsOverview> at src/components/DialogsOverview.vue
       <CardsMovie> at src/components/CardsMovie.vue
         <Main> at src/components/Main.vue
           <VMain>
             <VApp>
               <App> at src/App.vue
                 <Root>

Answer 1

You cannot directly mutate the value of props. Use a different variable for v-model to get rid of this error. Look at the below code:

<template>
<div>
    <v-dialog :id="key" v-model="dialogValue">
      <v-card>
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>{{ overView }}</v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogValue: false, //considering this value as Boolean
    };
  },
  props: {
    dialog: Boolean,
    overView: String,
    title: String,
    key: String, //add 'String' or 'Number', whatever type you are receiving
  },
  mounted(){
    this.dialogValue = this.dialog;
  }
};
</script>

Assigning the props value dialog to a new variable dialogValue in the mounted hook and then using it as v-model will fix your error.