问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue如何判断表单中的数据（对象）是否发生了改变

头像
Hey金子
    14593458

    vue中如何判断表单的内容是否发生了改变，并提示用户数据已修改是否保存

    javascriptelement-uivue.js
    阅读 35.8k
    8 个回答
    得票最新
    头像
    爱学习的小白菜
      122

      转成字符串后 比对修改后的字符串是否相等

      头像
      腹中有书气自华
        2k73450
        <div id="app">
    <input type="text" v-model="v1"/>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        v1: '2'
      }
    },
    watch: {
      v1: function () {
        alert('数据已经修改，是否保存')
      }
    }
  })

        可以使用watch属性来监听数据的变化
        如果这样不行 试下下面这个呢

        <div id="app">
    <input type="text" v-model="v1.key1" name="dj" @change="handlerChange"/>
    <input type="text" v-model="v1.key2" name="dj1" @change="handlerChange"/>
    <input type="text" v-model="v1.key3" name="dj2" @change="handlerChange"/>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        v1: {
          key1: '1',
          key2: '1',
          key3: '1'
        }
      }
    },
    methods: {
      handlerChange(e) {
        alert(e.target.name + "数据发送变化" + e.target.value)
      }
    }
  })
</script>
        头像
        筱颖Daisy
          114
          新手上路，请多包涵
          data(){
  return {
    editForm: {}, //绑定在表单上，用于数据渲染
    prevForm: {}, //保存原本的数据，通过渲染的数据的改变与原本的数据进行对比
    editFormChanged: false, // 是否修改标识
  }
},
watch: {
  // watch监听 判断是否修改  
  editForm: {
    handler (val, oldVal) {
      for (let i in this.editForm) {
        if (val[i] != this.prevForm[i]) {
          this.editFormChanged = true;
          break;
        } else {
          this.editFormChanged = false;
        }
      }
    },
    deep: true
  }
},

          至于prevForm的赋值，在给editForm赋值的时候，给prevForm同时赋值即可。

          头像
          岛风风
            4333917

            @change

            头像
            Albert
              25419

              v-model 然后 watch

              比如

              <template>
    <input name='a' v-model="a" type="input" />
</template>
<script>
export default {
data(){
    return {a:0,b:0};
},
watch:{
   a(oldv,newv){
    //提示是否要保存
    let bool = true;
    this.a = bool ? newv : oldv;
   }
}
};
</script>
              头像
              轻歌曼舞
                123211

                监听对象中的某个值

                watch:{
    "form.id"(){
                    
    }
}

                form是针对表单的对象，id是表单内某一个输入框绑定的值

                头像
                陌路凡歌
                  7.9k21119

                  把你的表单元素的v-model放进一个数组中，用watch进行深度监听

                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div id="app">
            <input type="text" v-model="arr.key1" />
            <input type="text" v-model="arr.key2" />
            <input type="text" v-model="arr.key3" />
            <input type="text" v-model="arr.key4.val" />
        </div>
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>

           var vm = new  Vue({
            el:"#box",
            data:{
              arr:{
                  key1:1,
                  key2:2,
                  key3:3,
                  key4:{
                      val:4
                  }
              }
             },
             methods:{
                
             },
             mounted () {
              
            },
            watch: {
            arr:{
                handler:function(obj){
                   console.log(obj);
                },
                deep:true
            }
            }
    
            
        });
    </script>
</body>
</html>
                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题