场景
注册用户的时候,当用户输入用户名后,发送ajax请求到后台查询此用户名是否被注册过。由于是异步操作,所以不适合使用计算属性(computed)
,而异步操作选择监视属性/侦听属性(watch)
是个不错的选择。请看代码:
template
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>注册用户</span>
</div>
<div>
<el-form :inline="true">
<el-form-item label="用户名">
<el-input placeholder="用户名" v-model="user.username" maxlenght="20"/>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="用户名" v-model="user.password" maxlenght="18"/>
</el-form-item>
<el-form-item label="选择平台">
<el-select v-model="user.platform" placeholder="选择平台">
<el-option v-for="platform of platforms" :key="platform.id" :label="platform.name" :value="platform"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">立即注册</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</template>
script
<script>
export default {
name: "user",
data() {
return {
user: {
username: undefined,
password: undefined,
platform: undefined
},
platforms: [
{id: 1001, name: '抖鸟'},
{id: 1002, name: '拼多多'}
]
}
}
}
</script>
存在问题
上面的例子中,由于双向绑定的数据有多个层级,而不是直接在data中,所以不能用常规写法
解决办法
<script>
export default {
name: "user",
data() {
return {
user: {
username: undefined,
password: undefined,
platform: undefined
},
platforms: [
{id: 1001, name: '抖鸟'},
{id: 1002, name: '拼多多'}
]
}
},
watch: {
'user.username'(newValue, oldValue) {
console.log('do something ...', newValue, oldValue);
}
}
}
</script>