0

Is it possible to compare a value with a string in LWC template tag?

<template if:true={v.value === 'String'}></template>

If not, how can I do this???

3

LWC doesn't support expressions. You need to have a property somewhere you can read. This can be either a getter:

get isValueString() {
  return this.value === 'String';
}

Or as a property on your data:

this.data = this.data.map(datum => ({ ...datum, isValueString: datum.value === 'String' }));
2
  • in <template if:true={v.value === 'String'}></template>, the v.value comes from an iteration <template for:each={records} for:item="v">. how can I do in this case? what do I return in JS? `` return this.value === 'String';`` doesn't work. – Jean Michell Oct 1 '20 at 19:39
  • 1
    @JeanMichell When v comes from an iteration, you need to inject a field into your data, as described at the end of this answer. – sfdcfox Oct 1 '20 at 19:46
2

First thing, in LWC you don't need v.. Just use the property name enclosed in two braces eg. {propertyName}.

You can't use expressions in the HTML markup of LWC. For this particular scenario, you can use the getter method in the JS controller.

get isSomething(){
    return this.value === 'String';
}

Use this in HTML like below.

<template if:true={isSomething}></template>
2
  • in <template if:true={v.value === 'String'}></template>, the v.value comes from an iteration <template for:each={records} for:item="v">. how can I do in this case? what do I return in JS? `` return this.value === 'String';`` doesn't work. – Jean Michell Oct 1 '20 at 19:37
  • @JeanMichell check the second code block in the answer by Sfdcfox. – Rahul Gawale Oct 2 '20 at 3:45
0

Already answered by @sfdcfox, providing an example HTML file :

<template>
    <template for:each={itemJsonArr} for:item="item">
        <div key={item.id}>
            {item.id}
            {item.name}
            <template if:true={item.showDesignation}>
                &nbsp;{item.designation}
            </template>
        </div>    
    </template>
</template>

Javascript file : A new "showDesignation:true/false" pair is used to distinguish each record based on some condition. Here for each record in the array we will have "showDesignation=false", and for "item.name === 'Dhoni'", showDesignation will be "true".

import { LightningElement} from 'lwc';

export default class App extends LightningElement {

    itemJsonArr = [
        {
            "id": "1",
            "name": "Sachin",
            "designation": "Manager"
        },
        {
            "id": "2",
            "name": "Dhoni",
            "designation": "Senior Developer"
        },
        {
            "id": "3",
            "name": "Virat",
            "designation": "Junior Developer"
        }
    ];

    itemJsonArrCopy = this.itemJsonArr.map(item => {
        if (item.name === 'Dhoni') {
            item.showDesignation = true;
        } else {
            item.showDesignation = false;
        }
    });
}

Screenshot from LWC playground enter image description here

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.