我有一个想要在不同页面上使用的组件。嗯,在第一次切换之前它运行良好。它显示得像以前一样,但是当我单击“关闭”按钮时,它会关闭,但控制台输出:
[Vue warn]:避免直接改变 prop,因为该值将是
每当父组件重新渲染时都会被覆盖。相反,使用
基于 prop 值的数据或计算属性。道具存在
突变:“可见”
found in
---> 在 src/components/Snackbar.vue
在 src/views/Login.vue
之后点击就不会显示了
有任何解决这个问题的方法吗?
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>
登录.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>
控制台错误是这样触发的:
@click.native="visible = false"
该组件直接改变传入的 prop。如果您想在父组件控制可见性的地方保持这种控制级别,则必须通过让单击事件发出一个事件来实现,该事件由父组件接收并设置this.snackbar.visible = false
从而触发道具更改并且子组件被隐藏。
<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;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)