How to access data properties in Vue 2 in script tag

Question

I have defined a variable isShowDrop2

var app = new Vue({
      el: '#vueapp',
      data: {
        isShowDrop1: false,
        isShowDrop2: false,
      },
        methods: {
            drop_hide() {
               if (isShowDrop2 == false) {
                   // Do nothing
               } else {
                   isShowDrop1 = false
               }
            }
        }
});

Running drop_hide() throws a console error that says isShowDrop2 is not defined.

https://jsfiddle.net/Nata_Hamster/ayLw083b/

Answer 1

You need to reference all the properties in data as properties of this.

drop_hide() {
  if (this.isShowDrop2 == false) {
      // Do nothing
  } else {
      this.isShowDrop1 = false
  }
}