修改对象的属性导致只读错误

Question

我遇到了这个问题：我正在尝试使用输入表单中的值（示例中的 <el-input>）修改对象的属性之一。我们公司的堆栈使用 VueJs + TS + ElementUI。不幸的是，对象的属性似乎不能反应并且处于只读模式。如何使对象属性具有反应性？

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;

当我尝试在上面的文本区域中键入内容时，组对象的属性 group.groupDescription 的值永远不会更新，即使它与 v-model 指令绑定。

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

我是否误解了 getters/setters 绑定到 VueJs 中的数据属性的方式，或者这是 TypeScript 特定的问题？提前致谢！

Answer 1

在VueJS中有严格的参数限制开发者直接修改props。解决方法是设置一个数据属性为相应 prop 给定的初始值。 IE。给定 initialUser 的道具，我们将设置 user 的数据属性并将其值设置为 this.initialUser 使用此方法，您将能够修改 user 变量，同时仍然通过 initialUser 属性获取传递给组件的初始值。请让我知道，如果你有任何问题。

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

修改对象的属性导致只读错误

Modifying object's property results in read-only error

typescript

vue.js

element-ui

修改对象的 属性 导致只读错误

Modifying object's property results in read-only error

typescript

vue.js

element-ui

修改对象的属性导致只读错误