Watch属性在Vuejs中不起作用

Question

I started to learn Vuejs, in the middle of a job I tried to test the Watch property but it doesn't work for me, can you tell what's wrong with the below code?

<div id="k2c">
    Kilometers : <input v-model= "Kilometers">
    Meters : <input v-model = "Meters"> 
</div>
<script type="text/javascript"> 
    var vr = new Vue({ 
        el:'#k2c',
        data:{
            Kilometers: 0;
            Meters : 0;
        },

        methods:{

        },
        computed:{
        },
        watch : {
            Kilometers : function(val){   
                this.Kilometers = val;
                this.Meters = val * 1000;  
            },    
            Meters : function(val){
                this.Kilometers = val / 1000;
                this.Meters = val;
            }
        }
    });
</script>

Answer 1

You are mutating the properties inside their watchers. Don't, it is not necessary. Apart from it, you had other problems (see comments below).

Recommended reading: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

 <script src="https://unpkg.com/vue"></script> <div id="k2c"> Kilometers : <input v-model="Kilometers"> Meters : <input v-model="Meters"> </div> <script> var vr = new Vue({ el: '#k2c', data: { Kilometers: 0, // replaced ; with , Meters: 0 // removed ; here }, methods: { }, computed: {}, watch: { Kilometers: function(val) { //this.Kilometers = val; // commented out this line, you should remove it this.Meters = val * 1000; }, Meters: function(val) { this.Kilometers = val / 1000; //this.Meters = val; // commented out this line, you should remove it } } }); </script> 

Note: Your two computed properties have a cyclic dependency (changing one changes the other and vice-versa). Currently this is not a problem because their values are converging . If this didn't happen, you'd get a stackoverflow error.