DOM not updating after async fetch in polymer.js

Question

I am using Polymer.js v3.0

I have this div tag:

<div class="body">
   <template is="dom-if" if="[[!hideSection]]">
   </template>
</div>

This hideSection flag is initially true so the template does not show up. After an async fetch call, we are setting this flag to false but the dom is not reflecting this change and the so the content in this div is still hidden.

Is there anything different needs to be done in polymer.js to bring this into effect? The logic of setting the flag to false:

this.hideSection = false

is written in the .then call back of .fetch.

Can someone please help with this?

Thanks.

Answer 1

In order for Polymer to detect the changes correctly (i.e. notify the dom), use the following:

this.set("hideSection", false);