How to initialize a vue property with javascript variable

Question

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>

Boussadjra Brahim · Accepted Answer · 2020-11-07 20:26:51Z

2

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
   }

}

answered Nov 7, 2020 at 20:26

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Omar Ashraf Over a year ago

By this you make the v-model set to this watcher ?? @Boussadjra

Boussadjra Brahim Over a year ago

your input is still bound to calcoperation like <input type="text" v-model="calcoperation" id="calculationid" >, the watcher just looks to the changes and does the appropriate logic like this.calcvalue=newVal

Boussadjra Brahim Over a year ago

no, that will raise an error because you've already defined the v-model

Boussadjra Brahim Over a year ago

the input is already bound to calcoperation and you could modify calcvalue as i suggested, could explain more your real need

Boussadjra Brahim Over a year ago

calcoperation is two-way bound to the input, any change in the input will affect calcoperation and vice-versa

|

Collectives™ on Stack Overflow

How to initialize a vue property with javascript variable

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related