typescript - Endring av objekts egenskap resulterer i skrivebeskyttet feil

Jeg har dette problemet: Jeg prøver å endre en av objektets egenskaper med verdien fra inntastingsskjemaet (<el-input> i eksemplet). Vår bedrifts stack bruker VueJs + TS + ElementUI. Dessverre ser det ut til at objekters egenskaper ikke kan være reaktive og er i skrivebeskyttet modus. Hvordan kan jeg gjøre objektets egenskaper reaktive?

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;

Når jeg prøver å skrive noe i tekstområdet ovenfor, blir verdien aldri oppdatert for gruppeobjektets egenskap group.groupDescription selv om det er bundet med v-model-direktivet.

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

Misforstår jeg måten getters/setters er bundet til dataproperties i VueJs, eller er dette et TypeScript-spesifikt problem? Takk på forhånd!

Svar #1

I VueJS finnes det strenge parametere som hindrer utviklere i å endre props direkte. Løsningen er å sette en dataprop til den opprinnelige verdien gitt av den tilsvarende propen. F.eks. gitt en prop av initialUser, ville vi satt en dataprop av user med verdien satt til this.initialUser. Med denne metoden vil du kunne endre user-variabelen samtidig som du fortsatt får den opprinnelige verdien som ble sendt til komponenten via initialUser-propen. Gi meg gjerne beskjed hvis du har noen spørsmål.

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

Relaterte artikler