Apex Code Development You need to sign in to do that
Don't have an account?
Dileep Katari How to display text values one click after another?
Requirement:
Three cities
First Click on the lightning card
First city should display and continue to display
Second click on the lightning card
Second city should display and continue to display
Third click on the lightning card
Third city should display and continue to display
Ex : Upon first click, Tirupati should display
Upon second click, Nellore should display
Upon third click, Kanchipuram should display
and finally all three city values shoudl continue to display like that
I could come up with the below code but it is static. I am new to LWC, please help. Thank you.
JS :
import { LightningElement,track } from 'lwc';
export default class ConditionalRenderingExample extends LightningElement {
city;
@track cityList = ['Tirupati', 'Nellore', 'Kanchipuram'];
showCityHandler(event){
this.city = target.event.value;
}
}
HTML :
<template>
<lightning-card onclick={showCityHandler}>
<template for:each={cityList} for:item="city">
<p key={city}>{city}</p>
</template>
</lightning-card>
</template>
Three cities
First Click on the lightning card
First city should display and continue to display
Second click on the lightning card
Second city should display and continue to display
Third click on the lightning card
Third city should display and continue to display
Ex : Upon first click, Tirupati should display
Upon second click, Nellore should display
Upon third click, Kanchipuram should display
and finally all three city values shoudl continue to display like that
I could come up with the below code but it is static. I am new to LWC, please help. Thank you.
JS :
import { LightningElement,track } from 'lwc';
export default class ConditionalRenderingExample extends LightningElement {
city;
@track cityList = ['Tirupati', 'Nellore', 'Kanchipuram'];
showCityHandler(event){
this.city = target.event.value;
}
}
HTML :
<template>
<lightning-card onclick={showCityHandler}>
<template for:each={cityList} for:item="city">
<p key={city}>{city}</p>
</template>
</lightning-card>
</template>
Use this code this will help you.
JS:
import { LightningElement,track } from 'lwc'; export default class ConditionalRenderingExample extends LightningElement { count = 0; @track selectedCity; @track cityList = ['Tirupati', 'Nellore', 'Kanchipuram']; showCityHandler(){ if(this.count && this.count === 3) { this.count = 0; } this.selectedCity = this.cityList[this.count]; this.count++; } }HTML:<template> <lightning-card onclick={showCityHandler}> <template for:each={cityList} for:item="city"> <p key={city}>{city}</p> </template> </lightning-card> </template>If you found it useful please appreciate my efforts and mark it as the best answer.LinkedIn: https://www.linkedin.com/in/soyab-hussain-b380b1194/
Regards
Soyab