Vue2 : v-show and changind data dynamically-CodePudding

I have this code that works but outputs an error

this.hideButton is not a function

here a part of the code

<template>
<div>
<v-select  
 @open="openSelect"
 @search="applySearch"
>
<b-button variant="none"  
     v-on:click="clickSelectAll" v-show="hiddenBtn">Select All</b-button>
 </div>
</template>
export default {
data() {
    return {
      hiddenBtn: false
    }
  },
 methods: {
applySearch(search, loading) {
      if (search.length > 0 && search.length < 3) {
        this.hideBtn(); 
        return;
      }  
      this.showBtn();   
      this.retrieveEntities(search, loading)
    },
    showBtn() {
      this.hiddenBtn = true;
    },
    hideBtn(){
      this.hiddenBtn = false;
    }
}

I think this is the wrong way to update my hiddenBtn property to show and hide the button, but It works even if I get an error, so I don't understand what happens

CodePudding user response：

you are calling this.hideBtn() which is not a function

    applySearch(search, loading) {
      if (search.length > 0 && search.length < 3) {
        this.hideBtn(); // <-- you are calling this.hideBtn() which isn't a function. just remove this and try
        return;
      }  
      this.showBtn();   
      this.retrieveEntities(search, loading)
    }

CodePudding user response：

This code should work properly, maybe you have somewhere else in code something that is trying to execute this.hideButton() while your method's name is this.hideBtn().