Polymer dom-if not working

Question

I have this template dom-if using Polymer 1.X, and it is not working.

It is supposed to display 'Loading' when requirement.allLoaded is false and display the real content when requirement.allLoaded is true.

I switch the state of this variable in my test function. But it doesn't take effects.

//Properties
requirement: {
    type:Object,
    value: {
        allLoaded: false,
        tagsLoaded: false
    }
}
//Test function
_testButton: function(){
    console.log(this.requirement);
    this.requirement.allLoaded = !this.requirement.allLoaded;
    console.log(this.requirement);

},

<div id="modal-content">
    <template is="dom-if" if={{!requirement.allLoaded}}>
        <p>Loading</p>
    </template>
    <template is="dom-if" if={{requirement.allLoaded}}>
        <iron-pages selected="[[selectedTab]]" attr-for-selected="name" role="main">
            <details-tab name="details"></details-tab>
            <bar-chart-tab name="barchart"></bar-chart-tab>
            <live-data-tab name="livedata" shared-info='{{sharedInfo}}'></live-data-tab>
        </iron-pages>
    </template>
</div>

Note: I already used this structure to display/not display things in other project (with Polymer 2) and it was working.

Answer 1

Is it only the change that does not work? I.e. it shows correctly on load?

Try notifying Polymer of the change: this.requirement.allLoaded = !this.requirement.allLoaded; this.notifyPath('requirement.allLoaded');

Answer 2

You could also use this.set('property.subProperty', value) for Observable Changes.
In your case, that's this.set('requirement.allLoaded', !this.requirement.allLoaded);