State of variable not binding

Question

<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.

You don't appear to have registered a click listener on the button. @click="OnBtn1Click". — skirtle
– skirtle, Commented Jan 17, 2020 at 0:20

Jesse Reza Khorasanee · Accepted Answer · 2020-01-17 03:04:20Z

1

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

answered Jan 17, 2020 at 3:04

Jesse Reza Khorasanee

3,5614 gold badges40 silver badges56 bronze badges

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

Comments

Qonvex620 · Accepted Answer · 2020-01-17 05:32:43Z

1

Add a click event on the button

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

answered Jan 17, 2020 at 5:32

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

State of variable not binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related