javascript - 如何使用 javascript 变量初始化 vue 属性
问题描述
在此代码中,如第 19 行,我想传递document.body.getElementById('calculationid').value
给 vue 变量(calcvalue
),但它不起作用,所以我该如何解决它或者是否有任何其他解决方案来获取输入标签值。
<template>
<div class="home">
<input type="text" v-model="calcoperation" id="calculationid" >
</div>
</template>
<script>
export default{
name:"home",
data(){
return{
var calcvalue : document.body.getElementById('calculationid').value ,
title: "",
valuecalc: "",
calcoperation: ""
// valuecalc: calcoperation
};
},
methods:{
//To contact the input field text with the button pressed
contterms(str){
var temp = "" + str
this.calcoperation = this.calcoperation + temp
}
},
mounted(){
fetch("http://localhost:8085")
.then(response =>{
return response.text();
})
.then(data =>{
this.title=data;
});
}
};
</script>
解决方案
不要以这种方式操作 DOM,您可以将其声明calcvalue
为空变量,然后通过观察calcoperation
或将其定义为计算属性来更新它:
data(){
return{
calcvalue : "" ,
title: "",
valuecalc: "",
calcoperation: ""
// valuecalc: calcoperation
}
},
watch:{
calcoperation(newVal,oldVal){
this.calcvalue=newVal
}
}