如何使用 javascript 变量初始化 vue 属性

Question

在第 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>

Answer 1

不要以这种方式操作 DOM，您可以将 calcvalue 声明为空变量，然后通过观看 calcoperation 或将其定义为计算属性来更新它：

data(){
    return{
     calcvalue : "" ,
      title: "",
      valuecalc: "",
      calcoperation: "" 
     // valuecalc: calcoperation
    }
},
watch:{
   calcoperation(newVal,oldVal){
    this.calcvalue=newVal
   }

}