1

我正在 TypeScript 中创建一个类来处理我的表单提交和服务器错误：

export default class Form<Model> {
    private readonly original: Model
    private changes: Partial<Model>

    constructor(data: Model) {
        this.original = data
        Object.keys(this.original).forEach(key => this.initialiseData(key))
    }

    private initialiseData(key) {
        Object.defineProperty(this, key, {
            get: () => this.data[key],
            set: (value) => this.changes[key] = value
        }
    }

    get data(): Model {
        return Object.assign({}, this.original, this.changes)
    }

    post(url: string) {
        // post logic
    }
}

这将在我的 Vue 组件中使用，如下所示：

import { Component, Vue } from 'vue-property-decorator'
import Form from '~/src/vform'

interface LoginForm {
    email: string
    password: string
}

@Component
export default class LoginView extends Vue {
    form: Form<LoginForm> = new Form<LoginForm>({
        email: '',
        password: ''
    })

    async submit() {
        await this.form.post('/auth/login')
    }
}

这在功能上有效，我可以填写表格并将数据提交到服务器。我遇到的问题是 Vue.js 的反应性。因为类上不存在属性Form，所以数据不会传递给v-model，它只会在表单更改后在表单内更新。

除非我从表单在屏幕上显示数据，否则这不是问题。我现在可以忍受它，但我想知道是否有办法让 Vue 识别我的Form类上的反应属性，或者是否有更好的方法来实现这个功能而不影响类型系统。

4

1 回答 1

1

嗯，你的操作比vuejs自己做的高很多。Vuejs 使用 setter 中的 Object.defineProperty 处理反应数据以重新渲染，但是，您提供的对象已定义其不可配置的属性，并且将无法触发 vuejs 的反应系统。

为了使它工作：

export default class Form<Model> {

    initialiseData(key) {
        Object.defineProperty(this, key, {
            get: () => this.data[key],
            set: (value) => {
                this.changes[key] = value
                this.onChange(key, value)
            },
        })
    }

    onChange(key, value) {}

}

import _Form from '~/src/vform'

@Component
export default class LoginView extends Vue {
    form: any = {}

    // Lifecycle hook
    mounted() {
        const vm = this
        class Form extends _Form {
          onChange() {
              vm.$forceUpdate()
          }
        }
        const form = new Form({
            email: '',
            password: ''
        })
        this.$set('form', form)
    }
}

请注意vm.$forceUpdate，当您的表单属性更改时，它将通知 vuejs 重新渲染。

于 2020-04-08T01:57:17.727 回答