Modifying object's property results in read-only error

Question

I have this problem: I'm trying to modify one of the object's properties with the value from the input form (<el-input> in the example). Our company stack utilizes VueJs + TS + ElementUI. Unfortunately, it seems that objects' properties cannot be reactive and are in read-only mode. How can I make object properties reactive?

HTML/CSS

<el-input v-model="group.groupDescription" type="textarea"></el-input>

JS:

interface ViewGroupResult {
  id: string;
  groupDescription: string;
}

import Vue from 'vue';
import {Component, Watch} from 'vue-property-decorator';
@Component
apollo: {

  group: {
    query() {
          group(groupId: $groupIdOrSlug) { ... }
        }
    },
    variables() {
      groupId: this.id
    },
    fetchPolicy: 'network-only',
    loadingKey: 'groupLoading'
  },

export default class ViewGroupPage extends Vue implements 
    group: ViewGroupResult | null = null;

When I try to type something in the text area above, the value is never updated for the group object's property group.groupDescription even though it's bound with v-model directive.

Error in event handler for "input": "TypeError: Cannot assign to read only property 'groupDescription' of object '#<Object>'"

Do I misunderstand the way getters/setters are bound to data properties in VueJs, or is this a TypeScript specific problem? Thanks in advance!

Answer 1

In VueJS there is strict parameters blocking developers from modifying props directly. The workaround is to set a data property to the initial value given by the corresponding prop. I.E. given a prop of initialUser we would set a data property of user with it's value set to this.initialUser with this method you'll be able to modify the user variable while still getting the initial value passed to the component via the initialUser prop. Please let me know if you have any questions.

    props: {
        initialUser: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            user: this.initialUser
        }
    },