Vue.js 將 object 字段與 object 屬性裝飾器綁定

Question

我想使用vue-property-decorator綁定 object 的字段。 以下代碼應說明我要實現的目標：

<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 。

Answer 1

我相信這個問題是因為你試圖改變一個道具。 請嘗試以下操作：

<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>