1

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;
         }
}

1 Answer 1

0

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;
     }
2
  • This solved the issue perfectly! Thank you!!
    – TEo
    Jul 8, 2020 at 15:38
  • You can accept the answer. Jul 8, 2020 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.