javascript - vue-property-decorator:道具正在变异?
问题描述
我使用vue-property-decorator
,它是一个简单的组件,我收到错误消息:
[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: "message"
这个消息是什么意思?我该如何解决这个问题?
这是我的代码,例如:
<template>
<v-layout row justify-center>
<v-dialog v-model="dialog">........</v-dialog>
</v-layout>
</template>
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
@Component({})
export default class SomeModal extends ... {
@Prop() public dialog?: boolean;
@Prop() public message?: string;
constructor() {
super();
}
public showError(er) {
this.message = er.message;
this.dialog = true;
}
}
</script>
<style scoped lang="scss">
</style>
解决方案
我不使用 vue 的这种语法,但信息很清楚:您需要定义数据属性或计算变量。这意味着:
data: {
dialogData: ''
}
constructor() {
super();
this.dialogData = this.dialog;
}
或者 :
computed: {
dialogData() {
return this.dialog;
}
}
请参阅有关计算属性的 vuejs 文档。
编辑:使用 vue-property-decorator,它可能是:
@Component
export default class YourComponent extends Vue {
// your code here...
private _dialogData: string = '';
constructor() {
super();
this._dialogData = this.dialog;
}
}
推荐阅读
- semantic-ui - 语义 UI - 如何将下拉菜单清除为默认值?
- ios - SKLabel 在分配给特定元素时未显示
- pdf - 谷歌脚本;不支持格式 application/pdf 到 application/pdf 的转换
- r - 这段 r 代码是连接两个表并创建一个图吗?
- python - 在numpy循环中,对矩阵的元素进行算术运算
- javascript - 在页面更改后将反应数据保留在反应中
- r - 在 ggplot (geom_line) 中手动调整线条颜色
- html - 如何在 R HTML UI 元素中为图像的全宽拉伸图像?
- c++ - 为什么 std::bit_width 为值 0 返回 0,它不应该返回 1 吗?
- python - Anaconda 阻止我的 discord.py 机器人工作