0

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>
Jonathan Anctil
  • 1,025
  • 3
  • 20
  • 44
  • how do you set the nbFailure property? – Andrés Rondán Mulero May 12 '19 at 13:51
  • ```this.set(`data.${index}.nbFailure`, value);```and isInFailure return true or false according to the new value. The if is execute when I click somewhere in the component, otherwise, nothing happen. – Jonathan Anctil May 14 '19 at 16:02
  • Have you tried adding restamp=true to the dom-if template as this will remove and add the template(with all the changes) for change of if value. – Vin May 28 '19 at 09:56

0 Answers0