Query in template css class name does not work in object usage only in object creation

[milosPavic]

Query in template css class name does not work in object usage only in object creation

<div class="{{this.isActive ? 'vv-lead-item active' : 'vv-lead-item'}}" data-id="{{this.id}}">

this.isActive:true/false is working on object creation

let item = new vvLeadItem(1,'peter','petersen',200,true); // works
     item.isActive=false; //not working
     item.name='Smith'// working ...

import { Slim } from './vendor/slim/index.js';
const tpl = `
<style>@import "../css/vv-lead-item.css"</style>
<div class="{{this.isActive ? 'vv-lead-item active' : 'vv-lead-item'}}" data-id="{{this.id}}">
 <span class="id">{{this.id}}<span *if="{{this.id != ''}}">.</span></span>
 <span class="name">{{this.name}}<span *if="{{this.name != ''}}">.</span></span>
 <span class="surname">{{this.surname}}</span>
 <span class="duration">{{this.duration}}</span>
</div>`;

export class vvLeadItem extends Slim {
    constructor(id,name,surname,duration,isActive=true) {
        super();
        this.id = id;
        this.name = name;//N.
        this.surname = surname;
        this.duration = duration;//"00:00:00";
        this.isActive=isActive;
    }
}

Slim.element('vv-lead-item', tpl, vvLeadItem);

[eavichay]

When the element is created via the DOM the constructor receives no paramters. You might want to try this:

<vv-lead-item .active="{{whatever-defines-is-active}}"></vv-lead-item>

Web components do support using constructors, but it is not recommended if you intend to use templates.

Let me know how this works for you, I will be happy to assist.