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输入框输入不了,和你所描述的不一致。