Vue 关闭组件返回避免直接改变 prop [英] Vue closing component returns avoid mutating a prop directly
问题描述
我有一个要在不同页面上使用的组件.嗯，它运行良好，直到第一次切换.它像以前一样显示，但是当我单击关闭"按钮时，它会关闭，但控制台输出:
<块引用>[Vue 警告]:避免直接改变 prop，因为它的值将是每当父组件重新渲染时被覆盖.相反，使用一个基于道具值的数据或计算属性.道具变异:可见"
发现于
---> 在 src/components/Snackbar.vue在 src/views/Login.vue
之后它不会在点击时显示
有什么办法可以解决这个问题吗?
Snackbar.vue
<v-snackbar v-model.sync="visible" :timeout="5000" 底部>{{ 内容 }}<v-btn flat color="primary" @click.native="visible = false">关闭</v-btn></v-snackbar></模板><脚本>导出默认{name: '小吃店',道具: ['可见的'，'内容']}登录.vue
<div class="登录"><Snackbar :visible="snackbar.visible" :content="snackbar.content"></Snackbar></模板><脚本>从 '@/components/Snackbar.vue' 导入 Snackbar导出默认{成分: {小吃店},数据:函数(){返回 {电子邮件: ''，密码: ''，小吃店: {可见:假，内容: ''}}},方法: {登录:函数(){if (this.email != '' && this.password != '') {//做点什么} 别的 {this.snackbar.content = '字段不能为空';this.snackbar.visible = true;}}}}
控制台错误由此触发:
@click.native="visible = false"
该组件直接改变传入的 prop.如果你想在父组件控制可见性的地方保持这种级别的控制，你必须通过让 click 事件发出一个事件来做到这一点，父组件接收并设置 this.snackbar.visible = false 从而触发 prop 更改并隐藏子组件.
<Snackbar :visible="snackbar.visible" :content="snackbar.content"v-on:requestClose="close"></Snackbar><v-btn flat color="primary" @click.native="$emit('requestClose')">关闭</v-btn>方法: {关闭:函数(){this.snackbar.visible = false;}}I have an component that I want to use on different pages. Well, it is working well till the first toggle. It shows like it used to, but when I click the 'Close' button, it closes, but console outputs :
[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: "visible"
found in
---> at src/components/Snackbar.vue at src/views/Login.vue
And after that it doesn't show up on click
Any way to fix this?
Snackbar.vue
<template>
<v-snackbar v-model.sync="visible" :timeout="5000" bottom>
{{ content }}
<v-btn flat color="primary" @click.native="visible = false">Close</v-btn>
</v-snackbar>
</template>
<script>
export default {
name: 'snackbar',
props: [
'visible',
'content'
]
}
</script>
Login.vue
<template>
<div class="login">
<Snackbar :visible="snackbar.visible" :content="snackbar.content"></Snackbar>
</div>
</template>
<script>
import Snackbar from '@/components/Snackbar.vue'
export default {
components: {
Snackbar
},
data: function() {
return {
email: '',
password: '',
snackbar: {
visible: false,
content: ''
}
}
},
methods: {
login: function() {
if (this.email != '' && this.password != '') {
// Do something
} else {
this.snackbar.content = 'Fields can\'t be empty';
this.snackbar.visible = true;
}
}
}
}
</script>
The console error is being triggered by this:
@click.native="visible = false"
The component is directly mutating the incoming prop. If you want to keep this level of control where the parent component controls the visibility you'll have to do it by having the click event emit an event, which the parent component receives and sets this.snackbar.visible = false thereby triggering a prop change and the child component is hidden.
<Snackbar :visible="snackbar.visible" :content="snackbar.content"
v-on:requestClose="close"></Snackbar>
<v-btn flat color="primary" @click.native="$emit('requestClose')">Close</v-btn>
methods: {
close: function() {
this.snackbar.visible = false;
}
}
这篇关于Vue 关闭组件返回避免直接改变 prop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
