elementUI watch表单里的某个字段
时间: 2023-10-07 14:13:27 浏览: 46
在ElementUI中,可以使用`$watch`方法去监测表单里的某个字段。具体实现方法如下:
首先需要在`data`中定义表单的数据:
```javascript
data() {
return {
form: {
name: '',
age: '',
gender: ''
}
}
}
```
然后在`watch`中添加监测函数,例如监测`name`字段的变化:
```javascript
watch: {
'form.name': function (newVal, oldVal) {
console.log(`name changed from ${oldVal} to ${newVal}`);
}
}
```
这里使用了`'form.name'`来指定监测的字段,当`name`字段的值发生变化时,会触发监测函数并打印出相应的信息。
完整的代码如下:
```html
<template>
<el-form :model="form">
<el-form-item label="Name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Age">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="Gender">
<el-select v-model="form.gender">
<el-option label="Male" value="male"></el-option>
<el-option label="Female" value="female"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
}
}
},
watch: {
'form.name': function (newVal, oldVal) {
console.log(`name changed from ${oldVal} to ${newVal}`);
}
}
}
</script>
```
希望对你有所帮助。