[英]passing v-model props in child component
I have parent component, where I want send a boolean in child Component for show me v-dialog with overview.我有父组件,我想在子组件中发送一个布尔值,以便向我展示带有概览的 v-dialog。 The result is many v-dialog that opens and a message of error in console.log of mutating.
结果是打开了许多 v-dialog,并在 console.log 中显示了一条错误消息。 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.
vue.runtime.esm.js?2b0e:619 [Vue 警告]:避免直接改变 prop,因为每当父组件重新渲染时,该值将被覆盖。 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>
You cannot directly mutate the value of props.你不能直接改变 props 的值。 Use a different variable for
v-model
to get rid of this error.为
v-model
使用不同的变量来消除这个错误。 Look at the below code:看下面的代码:
<template>
<div>
<v-dialog 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,
},
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.将 props 值
dialog
分配给mounted
钩子中的新变量dialogValue
,然后将其用作v-model
将修复您的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.