vue如何判斷表單中的數(shù)據(jù)（對象）是否發(fā)生了改變

vue中如何判斷表單的內容是否發(fā)生了改變，并提示用戶數(shù)據(jù)已修改是否保存

回答

編輯回答

局外人

@change

2017年10月24日 02:01

編輯回答

解夏

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>

2017年1月6日 00:58

編輯回答

青裙

把你的表單元素的v-model放進一個數(shù)組中，用watch進行深度監(jiān)聽

<!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>

2017年9月8日 00:13

編輯回答

命多硬

監(jiān)聽對象中的某個值

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

form是針對表單的對象，id是表單內某一個輸入框綁定的值

2017年2月9日 22:44

編輯回答

墨小羽

轉成字符串后比對修改后的字符串是否相等

2018年9月17日 06:40

編輯回答

假灑脫

<div id="app">
    <input type="text" v-model="v1"/>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        v1: '2'
      }
    },
    watch: {
      v1: function () {
        alert('數(shù)據(jù)已經(jīng)修改，是否保存')
      }
    }
  })

可以使用watch屬性來監(jiān)聽數(shù)據(jù)的變化
如果這樣不行試下下面這個呢

<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 + "數(shù)據(jù)發(fā)送變化" + e.target.value)
      }
    }
  })
</script>

2018年3月4日 16:50