在子组件中传递 v-model 道具

Question

我有父组件，我想在子组件中发送一个布尔值，以显示带有概览的 v-dialog。 结果是打开了许多 v-dialog，并在 console.log 中出现了一条错误消息。 我不知道我错在哪里。 你能帮助我吗？谢谢

<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>

子组件：

<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>

错误控制台

vue.runtime.esm.js?2b0e:619 [Vue 警告]：避免改变 prop 直接因为值将被覆盖每当父 组件重新渲染。相反，使用基于数据或计算属性 关于道具的价值。正在变异的道具：“对话”

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

你不能直接改变 props 的值。为v-model 使用不同的变量来消除此错误。看下面的代码：

<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>

将 props 值 dialog 分配给 mounted 挂钩中的新变量 dialogValue，然后将其用作 v-model 将修复您的错误。