Vue.js 将对象字段与对象属性装饰器绑定答案

【问题标题】：Vue.js bind object field with object property decoratorVue.js 将对象字段与对象属性装饰器绑定
【发布时间】：2021-05-04 22:05:22
【问题描述】：

我想使用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。

【问题讨论】：

试试PropSync
你能说得更具体点吗？
box 真的需要成为公共道具（由父组件设置）吗？看起来你只是在组件中初始化它，所以它可能是私有的。如果是这种情况，您可以只使用普通的类字段，您的 v-model 将按照您的示例中的预期工作。
github.com/kaorun343/vue-property-decorator#PropSync 说要使用此属性，因为它类似于导致反应状态的计算属性

标签： javascript typescript vue.js vuejs2 vue-property-decorator

【解决方案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>

【讨论】：

我需要确保this.box.description 始终与文本区域同步。您的解决方案似乎会在框描述更改时更新文本区域，但反之则不会。