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.
Hence, It's creating the issue. change the property name to something else. It will start working.