ElementUI 遇到的问题与解决方案

1、异步更新 form 表单里的数据无效

很多时候，我们需要请求接口获取到数据后，将某个数据展示在 input 框里，仅仅可读而不可更改。
比如：

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="网址">
    <el-input v-model="form.url"></el-input>
  </el-form-item>
</el-form>
</template>
<script>
export default {
	props: {
		id: {
			type: [Number, String],
			default: ''
		}
	},
	data () {
		return {
			form: {}
		}
	},
	created () {
		this.getUrl();
	},
	methods: {
		getUrl () {
			this.$axios.get(this.$api.getUrl, { params: { id } })
				.then(res => {
					if (res.code === 200) {
						const { url } = res;
						this.form.url = url; // 无效
					} else {
						this.$Message.error(res.msg);
					}
				})
		}
	}
}
</script>

上述代码运行后，发现——异步更新 form 表单里的数据无效。

这不是 ElementUI 的问题，而是因为 Vue2 的响应式实现方式造成的——Vue2 是基于 Object.defineProperty() 的响应式的——该实现方式，对于对象和数组里的异步数据变化是失效的：

• 对象：对对象的已有属性进行劫持（拦截/监听）。
• 数组：vue2 内部通过重写 “更新数组的一系列方法” 来实现对数组元素的劫持。

对于该类问题，vue2 给出了解决方案——请使用 Vue2 提供的 this.$set() 方法来修改异步的对象和数组里的数据。

那么我们就用 this.$set() 来修改上述案例：

getUrl () {
	this.$axios.get(this.$api.getUrl, { params: { id } })
		.then(res => {
			if (res.code === 200) {
				const { url } = res;
				// this.form.url = url; // 无效
				this.$set(this.form, 'url', url); // 有效
			} else {
				this.$Message.error(res.msg);
			}
	})
}

2、react + elementui 登录表单 · 首次登录后没有跳转而是刷新了登录页

源代码：

<el-form  id="form" ref="form" :model="loginForm" label-width="80px">
    <!-- <b><router-link to="/register">注册</router-link></b> -->
    <header>
        <h1>登录</h1>
        <p>输入您的用户名与密码</p>
    </header>
    <div class="item_one">
        <input
            type="text"
            v-model="loginForm.acount"
            placeholder="请输入手机号码"
            maxlength="11"
            @blur="animate()"
        />
    </div>
    <div class="item_two">
        <input type="text" v-model="loginForm.yzCode" placeholder="请输入验证码" />
        <input
            type="text"
            v-model="loginForm.countDown"
            disabled="false"
            :class="{'isClick': loginForm.showTimer}"
        />
        <input
            type="button"
            value="发送验证码"
            @click="sendSmsCheck"
            :class="{'isClick': loginForm.isClickyzCode}"
        />
    </div>
    <button @click="submitForm()">登录</button>
</el-form>

修改成这样就好了：

<div id="form" >
<!-- <el-form  id="form" ref="form" :model="loginForm" label-width="80px"> -->
    <!-- <b><router-link to="/register">注册</router-link></b> -->
    <header>
        <h1>登录</h1>
        <p>输入您的用户名与密码</p>
    </header>
    <div class="item_one">
        <input
            type="text"
            v-model="loginForm.acount"
            placeholder="请输入手机号码"
            maxlength="11"
            @blur="animate()"
        />
    </div>
    <div class="item_two">
        <input type="text" v-model="loginForm.yzCode" placeholder="请输入验证码" />
        <input
            type="text"
            v-model="loginForm.countDown"
            disabled="false"
            :class="{'isClick': loginForm.showTimer}"
        />
        <input
            type="button"
            value="发送验证码"
            @click="sendSmsCheck"
            :class="{'isClick': loginForm.isClickyzCode}"
        />
    </div>
    <button @click="submitForm()">登录</button>
<!-- </el-form> -->
</div>