Weird behavior using dom-if template in a list element

49 Views Asked by At

I have a weird problem with the use of dom-if. I have a list of elements that displayed a status with different colors when something is failing and also displaying the count of children elements failing.

The change of color is working fine (data-status$) but the displayed of the count does not work correctly.

To hide the count I've made a function isInFailure that return a boolean depending of a count value, but the dom-if is only execute when I click on the li element, like is digest cycle is not completed yet:

isInFailure(entity) {
    return entity.nbFailure > 0;
}

My html look like this:

...
<li on-click="selectEntity" class="entity">
    <span class="name">{{item.name}}</span>
    <div class="status">
        <span class="label-value">Entity Status</span>
        <span class="value" data-status$="{{item.value}}">{{item.value}}</span>
    </div>
    <div class="alerts">
        <div class="pill">                                                
            <template is="dom-if" if="[[isInFailure(item)]]">
                 <span class="badge" data-status$="{{item.value}}">[[item.nbFailure]]</span>
            </template>
        </div>                                        
    </div>
</li>
0

There are 0 best solutions below