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

我是否误解了将getter / setter绑定到VueJ中的数据属性的方式，或者这是TypeScript特有的问题吗？预先感谢！

Answer 1

在VueJS中，有严格的参数阻止开发人员直接修改道具。解决方法是将数据属性设置为相应属性提供的初始值。即给定initialUser的属性，我们将使用此方法将数据属性设置为user，将this.initialUser的数据属性设置为user，则您仍然可以修改initialUser变量获取通过props: { initialUser: { type: Object, required: true } }, data() { return { user: this.initialUser } },属性传递给组件的初始值。请让我知道，如果你有任何问题。

whereNull

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

1 个答案: