Use Getters and Setters

February 14, 2021 nisarkhan LWC, 0

HTML

<template>
    <lightning-card title="Two way data binding">
        <div class="slds-var-m-around_medium">
            <lightning-input type="text" label="Enter name" onkeyup={changeHandler}>
            </lightning-input>
            <div>{name} is a course of {title}</div>
        </div>
    </lightning-card>

    <lightning-card title="@track properties">
        <div class="slds-var-m-around_medium">
            <lightning-input type="text" label="Enter city" onkeyup={trackHandler}>
            </lightning-input>
            <div>{address.city} is my City</div>
        </div>
    </lightning-card>

    <lightning-card title="Getter Demo">
        <div class="slds-var-m-around_medium">
            <div>First username is {firstUser}</div>
            <div>Multiplication of {num1} and {num2} is {multiply}</div>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class HelloWorld extends LightningElement {
    /***Data binding example */
    name="John Doe"
    title ="John John"
    changeHandler(event){
        this.title = event.target.value
    }

    /***@track binding example */
   @track address={
        city:'Hotlanta',
        postcode:30329,
        country:'USA'
    }
    trackHandler(event){
        this.address.city = event.target.value
    }

    /***getter example */
    users = ["John", "Jane", "Doe"]
    num1 = 10
    num2 = 20

    // this.firstUser =this.users[0]
    get firstUser(){
        return this.users[0].toUpperCase()
    }

    get multiply(){
        return this.num1*this.num2
    }

}

Favorite

Lightning Aura Component CSV Uploader Conditional Rendering in LWC