0

i'm doing this tutorial on "Parent To Child Component Communication Using LWC" (added with time markers: https://youtu.be/eiTPjZ5nL2w?t=3134

The issue is this error:

VSCode error

As this is in the VSCode interface, wont allow the upload. And it seems a syntax error with the usage of the getter method in . As such, probably this component's code is useful

(HTML)

<template>
    <div class="myProgress">
        <div class="myBar" style={getStyle}> {percentage} </div>
    </div>
</template>

(JS)

import { LightningElement, api, track } from 'lwc';

export default class sftroopProgressbarChild extends LightningElement {
    @api percentage = 10;

    get getStyle() {
        return 'width: ' + this.percentage + '%';
    }
}

if i understand this, by default should render as:

<div class="myBar" style="width: 10%;"> 10 </div>

It's probably not a JS issue, because this works, and the progress bar gets the text value (not the width now) dynamically from the input value

<template>
    <div class="myProgress">
        <div class="myBar"> {getStyle} {percentage} </div>
    </div>
</template>

So, the issue seems to be

style={getStyle}> 

is there a way to correct that syntax?

enter image description here

1 Answer 1

1

I'm guessing you have some kind of typo in your code. Here's a working example.

import { LightningElement, api, track } from 'lwc';

export default class sftroopProgressbarChild extends LightningElement {
    @api percentage = 10;

    get getStyle() {
        return 'width: ' + this.percentage + '%';
    }
}

<template>
  <div class="myProgress">
    <div class="myBar" style={getStyle}>
    </div>
    <div class="myText">
      {percentage}
    </div>
  </div>
</template>

Demo.

I didn't bother to copy the original CSS, just a demo of how it should work. I also switched it to a slider for easier accessibility, but nothing would change if this were an input field as the original code did.

3
  • i don't know what it is: just copied your code, looks very similar to mine, and i get the same error. Always in style={getStyle} . Somehow the getter isnt working. Thanks for the help Commented Jun 5, 2022 at 23:50
  • here studio.webcomponents.dev/edit/xf5wfY2Ym2m4QBl4XpTN/src/… i can see a very similar code to yours, and also similar to the video. And it is working Commented Jun 6, 2022 at 8:21
  • 1
    @LuisAguiar You might try making sure your VS Code and extensions are up to date. It could be a local source error.
    – sfdcfox
    Commented Jun 6, 2022 at 11:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .