vue 数组转换成对象绑定form表单,输入值失去焦点清空的问题

Question

代码如下：

<template>
    <el-form :model="formData">
        <el-form-item label="标题">
            <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="端口">
            <el-input v-model="formData.port"></el-input>
        </el-form-item>
    </el-form>
</template>



data() {
    
    return {
        arr: [
                {name: 'title', value: ''},
                {name: 'port', value: ''}
             ]
    }

}

computed:{
    formData() {
        const obj = {}
        arr.map((item) => {
            this.$set(obj, item.name, item.value)
        })
        return obj
    }
}

表单的input框可以输入值，但是失去焦点，之前输入的就自动清空了，这是怎么回事？好像无法改变computed计算出来的对象的属性值

Answer 1

首先计算属性设计它的初衷是用于简单运算的，以减少在模板中放入太多的逻辑会让模板过重且难以维护。

formData计算属性的值是依赖arr的，你要改变formData是要去改变arr，而不是直接修改formData，因为不清楚你的业务，formData都不会建议这样写。而且我试了一下你的代码，input输入框输入不了，和你所描述的不一致。

Answer 2

监听change事件，收集数据，例如

selectChange(val, item) {
      this.clientForm[item.prop] = val
      this.$set(this.clientForm, item.prop, val)
      this.$forceUpdate()
      item.change && item.change(val)
    },