lwc-template-errors.md

LWC Template Errors

Template Expression Fails

Symptom:

Invalid expression

Cause:

• LWC templates do not allow arbitrary JavaScript.

Fix:

• move the expression into a getter.

Bad:

<template if:true={rows.length > 0}></template>

Good:

<template if:true={hasRows}></template>

get hasRows() {
  return Array.isArray(this.rows) && this.rows.length > 0;
}

Class Binding Fails

Bad:

<div class={isSelected ? 'selected' : ''}></div>

Good:

<div class={rowClass}></div>

get rowClass() {
  return this.isSelected ? 'selected' : '';
}