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>