Vue.js bind object field with object property decorator

Question

I want to bind the field of an object using the vue-property-decorator. The following code should illustrate what I am trying to achieve:

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

The description within the textarea gets properly initialized, but the binding doesn't seem to work once I start editing the text. I need the same solution as for this question, but working with vue-property-decorator: Vue.js bind object properties.

Answer 1

I believe the issue is because you're trying to mutate a prop. Try the following instead:

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