我有一个我想在不同页面上使用的组件。好吧,直到第一次拨动才能正常工作。它像以前一样显示,但当我点击“关闭”按钮时,它会关闭,但是控制台输出:
[Vue警告]:避免直接改变道具,因为该值将是 父组件重新渲染时会覆盖。相反,使用 基于道具价值的数据或计算属性。支持存在 变异:“可见”
在
中找到--->在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>
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>
答案 0 :(得分:3)
控制台错误由此触发:
@click.native="visible = false"
该组件直接改变了传入的道具。如果您希望将此级别的控制保持在父组件控制可见性的位置,则必须通过使click事件发出事件来执行此操作,父组件接收并设置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;
}
}