vue监听form表单中的值发生变更

最新推荐文章于 2025-10-10 09:36:49 发布

转载最新推荐文章于 2025-10-10 09:36:49 发布 · 7.9k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/185aa47d41c7

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

35 篇文章

订阅专栏

该博客内容展示了如何在Vue.js中使用`<el-form>`组件创建表单，并通过`v-model`和`watch`进行数据绑定及变化监听。示例代码包括了活动名称的输入框和活动区域的选择下拉框，当表单内的值发生改变时，`flagchange`计数器会递增，从而实现表单修改的检测。

参考：https://www.jianshu.com/p/185aa47d41c7

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
 </el-form>

<script>
	data(){
  return{
    ruleForm:{},
    flagchange: 0, // 默认值
  }
},
watch:{
  // 监听编辑是否有修改 - departAddForm
    ruleForm: {
      handler(val) {
        if (this.flagchange > 0) { 
           // 表单中的值发生了改变
        }
        this.flagchange++;
      },
      deep: true，// 深度监听
    }
}，
</script>