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

代码如下:

<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计算出来的对象的属性值

阅读 82
评论
    2 个回答

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

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

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

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

        登录后参与交流、获取后续更新提醒