[SalesForce] lwc Lightning Button not working

I have this simple conditional display of templates using lwc, but the lightning button I'm trying to use in order to change the view is not working. The button is shown when the component is rendered but no action happens when clicking.
Could you help me know what am I missing? Below is the sample code.

<template>
    <template if:true={dayview}>
        <div class="slds-size_1-of-1 blockOne container">
            <div class="slds-size_1-of-1 blockOne">    
                <p class="today">TODAY</p> 
            </div>
            <div><lightning-button variant="brand" label="Week View" onclick={handleView}></lightning-button></div>
    </template>
    <template if:false={dayview}>
        <div class="slds-size_1-of-1 blockOne container">
            <div class="slds-size_1-of-1 blockOne">    
                <p class="today">WEEK OVERVIEW</p>
            </div>
            <lightning-button variant="brand" label="Today" onclick={handleView}></lightning-button>
        </div>
</template>

JS:

import { LightningElement, track } from 'lwc';
/* eslint-disable no-console */
/* eslint-disable no-alert */

export default class myComp extends LightningElement {
       
       @track dayview = true;
       @track handleView;
       
       handleView(){
         if(this.dayview == true){    
              this.dayview = false;
              console.log(this.dayview);
         } else {
              this.dayview = true;
         }
}

Best Answer

You have defined a propery with name handleView and a function with same name handleView.

   @track handleView;
   
   handleView(){
   }

Hence, It's creating the issue. change the property name to something else. It will start working.

   @track handleViewValue; // I have changed it to handleViewValue from handleView
   
   handleView(){
     if(this.dayview == true){    
          this.dayview = false;
          console.log(this.dayview);
     } else {
          this.dayview = true;
     }
Related Topic