VueJS 错误避免直接改变 prop [英] VueJS error Avoid mutating a prop directly
问题描述
我正在尝试创建一个模态，但只有在我关闭它时才会收到此错误:
[Vue warn]:避免直接改变 prop，因为每当父组件重新渲染时，该值将被覆盖.相反，根据道具的值使用数据或计算属性.道具被变异:价值"在发现---><PanelDesconectarModal>在资源\资产\ vue\PanelDesconectarModal.vue<VNavigationDrawer><面板抽屉>在资源\资产\ vue\PanelDrawer.vue<VApp><面板根目录>在资源\资产\vue\PanelRoot.vue<VApp><根>PanelDeconectarModal.vue
<v-dialog v-model="value" max-width="350"><v-card :dark="($theme === 'dark')"><v-card-title class="headline">Deconectar</v-card-title><v-divider></v-divider><v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text><v-card-actions><v-间隔></v-间隔><v-btn flat @click.native="closeDialog">取消</v-btn><v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn></v-card-actions></v-card></v-对话框></模板><脚本>导出默认{name: 'panel-desconectar-modal',道具:['价值']，方法: {关闭对话框(){this.value = false;},desconectar() {this.closeDialog();window.location = this.$route + '/panel/desconectar';}}}使用ProgressDesconectarModal.vue，showDeconectar是一个数据变量
<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>发生这种情况是因为您的 v-model 中有 props value.
不要这样做，因为这会在 v-model 更改时改变 prop(value)(您应该只更改 data 值使用 v-model afaik，但在这种情况下，您甚至不需要额外的 data 变量).
由于 vuejs v2.3.0，建议emit value 给父组件，以便父组件更改它，然后将其传递给子组件.<小时>所以你所要做的就是:
在v-dialog组件
删除 v-model 并替换为 :value="value" @input="$emit('input')"
还有你的函数:
closeDialog() {this.$emit('输入');}在 panel-desconectar-modal 组件中使用 v-model="showDeconectar".
这将起作用因为:
<块引用>是语法糖:<输入v-bind:value="东西"v-on:input="something = $event.target.value">I'm trying to create a modal but I'm getting this error only when I close it:
[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: "value"
found in
---> <PanelDesconectarModal> at resources\assets\vue\PanelDesconectarModal.vue
<VNavigationDrawer>
<PanelDrawer> at resources\assets\vue\PanelDrawer.vue
<VApp>
<PanelRoot> at resources\assets\vue\PanelRoot.vue
<VApp>
<Root>
PanelDesconectarModal.vue
<template>
<v-dialog v-model="value" max-width="350">
<v-card :dark="($theme === 'dark')">
<v-card-title class="headline">Desconectar</v-card-title>
<v-divider></v-divider>
<v-card-text>Você tem certeza que deseja desconectar-se?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat @click.native="closeDialog">Cancelar</v-btn>
<v-btn :color="$color" flat="flat" @click.native="desconectar">Desconectar</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'panel-desconectar-modal',
props: ['value'],
methods: {
closeDialog() {
this.value = false;
},
desconectar() {
this.closeDialog();
window.location = this.$route + '/panel/desconectar';
}
}
}
</script>
Using ProgressDesconectarModal.vue, showDesconectar is a data variable
<panel-desconectar-modal :value="showDesconectar"></panel-desconectar-modal>
This happens because you have props value in your v-model.
Do not do that, as that will mutate the prop(value) when v-model changes (you should only change data values with v-model afaik, but in this case, you don't even need additional data variable).
Since vuejs v2.3.0, it is suggested to emit value to the parent, so that parent changes it, and it is then passed to child component.
So all you have to do is:
in v-dialog component
remove v-model and replace it with :value="value" @input="$emit('input')"
And your function:
closeDialog() {
this.$emit('input');
}
In panel-desconectar-modal component use v-model="showDesconectar".
This will work because:
<input v-model="something"> is syntactic sugar for: <input v-bind:value="something" v-on:input="something = $event.target.value">
Here is working example pen which I provided in an answer to similar question.
这篇关于VueJS 错误避免直接改变 prop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
