How to initialize a vue property with javascript variable

user_12292967 0
Viewed 693

In this code like in line 19 i want to pass document.body.getElementById('calculationid').value to a vue variable (calcvalue) but it does not work, so how i can solve it or is there any other solutions to get the input tag value .

<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>
vuejs2 vue.js html javascript
1 Answers

Don't manipulate the DOM in that way, you could declare calcvalue as an empty variable then update it by watching calcoperation or by defining it as computed property :

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

}
user_81728570
Related