CODEWITHSUNDEEP
vue.jsvuejs2
mana
mana

Reputation: 1239

State of variable not binding

<button id="btn1"> Button 1 </button>
<button id="btn2" v-if="state == 2"> Button 2 </button>

 export default {
        data() {
            return {
                emailPreferences: {
                    isLoading: false
                },
                state: 0 
            }
        },
       methods: {

        OnBtn1Click() {
            this.state = 2;
        }
      }
  }

I'm trying to show the button "btn2" when I click the Button 1. But it doesn't seems to work.

Upvotes: 0

Views: 60

Answers (2)

Qonvex620
Qonvex620

Reputation: 3972

Add a click event on the button

<button @click="OnBtn1Click" id="btn1"> Button 1 </button>

Upvotes: 1

Jesse Reza Khorasanee
Jesse Reza Khorasanee

Reputation: 3471

Just putting @skirtle's comment in an awnser: 

new Vue({
  el: '#app',
  data: {
    state: 0 
  },
  methods: {
    OnBtn1Click() {
      this.state = 2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="OnBtn1Click" id="btn1"> Button 1 </button>
  <button id="btn2" v-if="state == 2"> Button 2 </button>
</div>

The logic of your code was fine, just had the 'onclick' property missing for the button

Upvotes: 1

Related Questions