我开始学习 Vuejs,在工作中我尝试测试 Watch 属性,但它对我不起作用,你能告诉我下面的代码有什么问题吗?
<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>
最佳答案
您正在改变其观察者内部的属性。不要,没必要。除此之外,您还有其他问题(请参阅下面的评论)。
推荐阅读: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>
注意:您的两个计算属性具有循环依赖性(改变一个会改变另一个,反之亦然)。目前这不是问题,因为它们的值正在收敛。如果这没有发生,您将收到 stackoverflow 错误。
关于javascript - 观看属性(property)在 Vuejs 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49281782/