CODEWITHSUNDEEP
vue.js
IshitaP
IshitaP

Reputation: 21

In vue can not change value of one variable when changing other

when I input the value of 'count', want to change the value of 'countcolor' instantly. I don't understand the binding of the value or is this need component to introduce? What to do?

<div id="app-13"> 
            give a count to know the color (0,1 or anything)<br>
            <input type="text" name="" v-model="count" v-on:keyup.enter="cometh"><br> 
            <p>when the count is {{ count }}<br>
              color is <span>{{ countcolor }}</span>
            </p>
          </div>

and js is:

var app13 = new Vue({
  el: '#app-13',
  data: {
    count: 0,
    countcolor: 'green'
  },
  methods:{
        cometh: function(){
            
            if(this.count === 0){
                this.countcolor === 'green'
            }else if(this.count === 1){
                this.countcolor === 'red'
            }else{
                this.countcolor === 'blue'
            }
        }
    }
  
})

Upvotes: 1

Views: 831

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

This can be achieved using the computed property just as follows

var app13 = new Vue({
  el: '#app-13',
  data: {
    count: 0,
  },
  computed:{
        countcolor() {       
            if(this.count === 0){
                return 'green'
            }else if(this.count === 1){
                return 'red'
            }else{
                return 'blue'
            }
        }
    }
})

and then you can render it by

<div id="app-13"> 
            give a count to know the color (0,1 or anything)<br>
            <input type="text" name="" v-model="count"><br> 
            <p>when the count is {{ count }}<br>
              color is <span>{{ countcolor }}</span>
            </p>
          </div>

Upvotes: 1

Related Questions