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.

Does box really need to be a public prop (set by a parent component)? It looks like you just initialize it within the component, so it could probably be private. If that's the case, you could just use a normal class field, and your v-model would work as you expected in your example. — tony19
– tony19, Commented Jan 31, 2021 at 18:20
github.com/kaorun343/vue-property-decorator#PropSync was saying to use this property as it similar to computed one which results in reactive state — shalini
– shalini, Commented Feb 1, 2021 at 12:30

dfvc · Accepted Answer · 2021-01-31 15:25:55Z

0

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>

answered Jan 31, 2021 at 15:25

dfvc

4144 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivaylo Toskov Over a year ago

I need to make sure that this.box.description is always in sync with the textarea. It seems with your solution the textarea will be updated when the box description changes, but not the other way around.

Collectives™ on Stack Overflow

Vue.js bind object field with object property decorator

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related