Vue.js 使用对象属性装饰器绑定对象字段

如何解决Vue.js 使用对象属性装饰器绑定对象字段

我想使用 vue-property-decorator 绑定对象的字段。以下代码应该说明我想要实现的目标：

<template>
  <textarea v-model="this.Box.description" placeholder="The description for the Box"></textarea>
</template>

<script lang="tsx">
import { Component,Prop,Vue } from 'vue-property-decorator';

export default class BoxScreen extends Vue {
  @Prop() private Box!: Box;

  public created() {
    // init Box with an Axios request
  }
}
</script>

textarea 中的描述已正确初始化，但一旦我开始编辑文本，绑定似乎就不起作用了。我需要与此问题相同的解决方案，但使用 vue-property-decorator: Vue.js bind object properties。

解决方法

我相信这个问题是因为你试图改变一个道具。请尝试以下操作：

<template>
  <textarea
    v-model="description"
    placeholder="The description for the box"
  ></textarea>
</template>

<script lang="tsx">
import { Component,Prop,Watch,Vue } from 'vue-property-decorator';

export default class BoxScreen extends Vue {
  @Prop() private box!: Box;

  description: string;

  @Watch('box.description',{ immediate: true })
  onChangeBoxDescription(): void {
    this.description = this.box.description;
  }

  public created() {
    // init box with an Axios request
  }
}
</script>