精华内容
下载资源
问答
  • 遇到个问题,是这样的使用到了 elementui的el-step组件, 每个步骤组件下使用的 动态组件,第一个step下是一个表单,我在点击下一步时收集到我表单里面我所填写的数据,后端返回给我一... 这个 回显数据 怎么做才好呢?
  • vue回显遇到的bug

    2020-12-17 14:34:03
    </el-checkbox-group> 回显数据结构,注意返回的数据tgs和data中的tags不同 { ... "tgs": [ 1, 2 ], ... } 回显赋值: let lat = this; axios.get("/business/businessUser/one?userId="+this.userId) .then...

    1. bug重现

    这里是我data的结构(不相关代码已经省略):

    return {
    	sizeForm:{
    		...
    		tags:[],  // 这里...
    		...
    	},
    }
    

    sizeForm.tags对应的复选框:

    <el-checkbox-group v-model="sizeForm.tags">
    	<el-checkbox
    				 v-for="data in tags"
    				 :label="data.value"
    				 :key="data.value">
    		{{data.label}}
    	</el-checkbox>
    </el-checkbox-group>
    

    回显的数据结构,注意返回的数据tgsdata中的tags不同

    {
        ...
        "tgs": [
            1,
            2
        ],
        ...
    }
    

    回显赋值:

    let lat =  this;
    axios.get("/business/businessUser/one?userId="+this.userId)
    	.then(function(response){
    		lat.sizeForm = response.data;
    		lat.sizeForm.tags = [];
    		for (let tg of response.data.tgs) {
    			lat.sizeForm.tags.push(tg)
    			lat.tagUse[tg] = true
    		}
    	})
    

    报错信息:

    [Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.model.length')"
    
    found in
    
    ---> <ElCheckbox> at packages/checkbox/src/checkbox.vue
           <ElCheckboxGroup> at packages/checkbox/src/checkbox-group.vue
             <ElDialog> at packages/dialog/src/component.vue
               <Root>
    

    2. 解决方案

    有人说:vue定义data中的数组里,如果不使用数组的方法来替换的话,数据是不会被重新渲染的!
    我的理解是,改变了data.tags的结构,造成的渲染奔溃,lat.sizeForm.tags = [] 在补救已经无济于事!
    正确写法是:

    let lat =  this;
    axios.get("/business/businessUser/one?userId="+this.userId)
    		.then(function(response){
    			lat.sizeForm = Object.assign({},response.data,{tags:[]})
    			for (let tg of response.data.tgs) {
    				lat.sizeForm.tags.push(tg)
    				lat.tagUse[tg] = true
    			}
    		})
    
    展开全文
  • Vue回显数据传入表单中无法修改

    千次阅读 2019-04-11 10:04:59
    通过axios请求后台获取了对象,存入了ruleForm中,在页面中通过键获取了值 <!--通过element组件实现,这是整个表单的一部分--> <el-form-item> <el-input v-model="ruleForm.fee">...
    通过axios请求后台获取了对象,存入了ruleForm中,在页面中通过键获取了值

    在这里插入图片描述

    <!--通过element组件实现,这是整个表单的一部分-->
    <el-form-item>
    	<el-input v-model="ruleForm.fee"></el-input>
    </el-form-item>
    
    但是发现前台操作时没有办法进行修改,或者是出现了一些奇怪的修改结果,通过请教得知,这中这种问题是JS导致的,处理方法为下
    • 将对象转化为字符串
    • 再将字符串转化为JSON对象

    也就是说要先将ruleForm进行两次处理, 但是代码非常简单,具体如下

    _this.ruleForm = JSON.parse(JSON.stringify(_this.ruleForm));
    

    对于其他代码无需修改

    展开全文
  • 前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改 项目环境:springboot+vue前后端分离 问题:修改操作数据回显无法输入值 一、问题截图 二、代码展示 编辑...

    前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改

    项目环境:springboot+vue前后端分离

    问题:修改操作数据回显无法输入值

    一、问题截图

    二、代码展示

    1. 编辑按钮
     <el-button type="text" size="small"
         @click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">编辑
    
    1. 点击编辑按钮后,实现数据回显方法

    这里是解决问题的关键!!!

    处理方法:将表单中的值先转化为字符串,然后转化为json对象

    JSON.stringify():将值转换为 JSON 字符串。

    JSON.parse() :将一个 JSON 字符串转换为对象。

    editCustomer(index, row, tableData) {
        this.ruleForm.updateData = JSON.parse(JSON.stringify(this.ruleForm));
        this.ruleForm.updateData.custId = tableData[index].custId
        this.ruleForm.updateData.custName = tableData[index].custName
        this.ruleForm.updateData.custSource = tableData[index].custSource
        this.ruleForm.updateData.custSex = tableData[index].custSex
        this.ruleForm.updateData.custTel = tableData[index].custTel
        this.ruleForm.updateData.custEmail = tableData[index].custEmail
        this.ruleForm.updateData.custAddress = tableData[index].custAddress
    }
    
    1. 修改表单
    <el-dialog title="修改客户" :visible.sync="updateWindow">
        <el-form label-width="100px" class="demo-ruleForm"
            size="mini">
            <el-form-item label="客户ID" prop="custId">
            <el-input v-model="ruleForm.updateData.custId" readonly></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="custName">
            <el-input v-model="ruleForm.updateData.custName"></el-input>
            </el-form-item>
            <el-form-item label="客户来源" prop="custSource">
            <el-input v-model="ruleForm.updateData.custSource"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="custSex">
            <el-input v-model="ruleForm.updateData.custSex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="custTel">
            <el-input v-model="ruleForm.updateData.custTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="custEmail">
            <el-input v-model="ruleForm.updateData.custEmail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="custAddress">
            <el-input v-model="ruleForm.updateData.custAddress"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="updateForm('ruleForm')">确认修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="updateWindow = false">取 消</el-button>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                </div>
                </el-dialog>
    
    1. 点击确认之后,向后端传入数据,执行修改操作
    /*修改表单*/
    updateForm() {
        axios.put("http://localhost:8181/Customer/updateCustomer", {
            custId: this.ruleForm.updateData.custId,
            custName: this.ruleForm.updateData.custName,
            custSource: this.ruleForm.updateData.custSource,
            custSex: this.ruleForm.updateData.custSex,
            custTel: this.ruleForm.updateData.custTel,
            custEmail: this.ruleForm.updateData.custEmail,
            custAddress: this.ruleForm.updateData.custAddress,
        }).then(function (resp) {
            if (resp.data == 1) {
                alert("修改成功!", window.location.href = "/CustomerManager");
            } else {
                alert("修改失败!")
            }
        })
    },
    

    总结:解决回显数据不能修改的问题需要将表单数据转换为json对象,不然前台修改不了值,后台接收不到值

    展开全文
  • <el-form-item label="状态" prop="status"> <el-select v-model="form.status" placeholder="请选择状态" > <el-option v-for="item in statuslist" :key="item.value" :label="item.label" :...
  • selectCityServiceOne() {let sendData = {token: this.token,id: this.id}post_ajax('backStage/cityService/selectCityServiceOne',sendData,(json) => {let data = json.datalet arr = ['import_name','...
          selectCityServiceOne() {

    let sendData = {

    token: this.token,id: this.id

    }

    post_ajax('backStage/cityService/selectCityServiceOne',sendData,(json) => {

    let data = json.data

    let arr = [

    'import_name','company_name','company_legal_person','service_city_id','service_province_id','service_province_name','service_city_name','detail_location','linker_man','linker_phone','license_image','identity_card_front','identity_card_back','card_name','card_num','bank_id','ymt_num','ykt_num','smzf_num','compay_email','company_online'

    ]

    // 给data字段赋值

    for (let key in data) {

    if (arr.indexOf(key) > -1) {

    this[key] = data[key]

    }

    }

    })

    }

    展开全文
  • vue3版本中是实现数据绑定为通过新的ref与reactive函数实现 <template> <div> <a-button type="primary" @click="getData"> 点击查询下一个 </a-button> <br /> <a-button ...
  • vue数据回显中处理返回对象中多余参数 处理返回对象中多余参数 //获取response返回的对象 var ob = response.data.user //获取dataFormform表单中的字段并遍历 Object.keys(this.dataForm).forEach((key) => ...
  • 项目上使用Vue+elementUI-select多选下拉框做数据编辑时,数据回显成功,但是无法对回显成功数据进行操作。 代码片段: <template> <el-form-item label="标签:" prop="values"> <el-select v...
  • 今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为...
  • vue 下拉框回显映射

    2021-01-11 10:25:08
    vue 下拉框回显映射 大家在做项目的时候,应该非常的容易遇到,下拉框的回显问题吧? 包括单选框,复选框,级联框的回显 如果使用组件的话, 比如element-UI,他们内部有自己的映射方法,将id传过去自己能回显到下拉框中,...
  • <el-input v-model.trim="item.value" type="textarea" autosize></el-input>
  • 背景:el-ree 树形控件回显数据的问题,在网上有很多坑,也有许多对这个问题的解决方案及代码,但大都说的不明白 本解决方案如下: 直接上代码: VIEW: <el-form :model="selForm" ref="selForm" label-...
  • 今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了,但是这个问题还是存在的,后来发现问题是回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些,因为调用的对象...
  • 当我们在用vue的时候,有的时候我们需要在jsp上回显从后台传回来的数据,但是这时候就会发现,大家利用 $("#").val(); 这种方法给页面上的input赋值的时候,数据的确是赋值给了你想要的那个input中了...
  • vue编辑回显问题

    千次阅读 2018-08-10 16:43:00
    就下面这玩意儿,多选组合框,新增的时候好用的不行不行的,到了编辑的时候,要回显数据,怪毛病一堆一堆的 首先,回显的时候要传一个数组,但是这个数组里的元素得是字符串类型的,如果是lang型的id,还得手动...
  • vue 下拉框回显bug

    2021-09-16 10:42:58
    下拉框回显只能看到id 而不是对应的文字,下拉框是取字典表的数据 将Value的值使用Number包裹起来,如下示例: <el-select v-model=""> <el-option v-for="item in cargoClassOption" :key="item....
  • Vue select 回显

    2021-04-14 15:15:48
    从后台拿到的id是int,但是select组件的id是string,做一下转换即可 getUserList() { userList().then((res) =>{ res.data.forEach(element => { var userId = ... }, users绑定到select上,基本就能成功回显了。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,126
精华内容 1,650
关键字:

vue回显数据

vue 订阅