How to "clean" data in a polymer component after reshowing in browser

Question

I want to achieve te following with Polymer 2.0:

Expected behaviour: Everytime I visit the page /negotiating-view/{id} all input components (radio buttons) to be unchecked. Actual behaviour: Everytime I visit the page the radio buttons have the previous filled in value, unless I press "refresh".

My initial thought was to make clear the radio buttons via the constructor or ready method. However, only the first time I visit the page these methods are reached. So to me it looks like it renders the component once and keeps any values.

In my-app component I use iron pages:

 <iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="visible"
          fallback-selection="view404" role="main">
[..]
          <market-view
            name="market-view"></market-view>
          <negotiating-view
            name="negotiating-view"
            user="{{user}}"
            route={{subroute}}></negotiating-view>
        </iron-pages>

with js:

_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'home-view'

}

_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
const resolvedPageUrl = this.resolveUrl(page + '.html')
Polymer.importHref(
  resolvedPageUrl,
  null,
  this._showPage404.bind(this),
  true)
}

As provided by polymer init. One can visit the negotiating view via for-example the market-view component via a paper-buttton (Simple anchor tag has same result)

<paper-button raised class="orange-button" on-tap="_negotiation" data-args$="{{item.id}}">Negotiate contract</paper-button>
[..]
_negotiation(e) {
    var apiId = e.target.getAttribute('data-args')
    this.set('route.path', '/negotiating-view/' + apiId)
}

Than on the negotiation-view I have the following radio buttons which remain selected after the first visit:

<paper-radio-group selected="{{selectedSubs}}">
  <paper-radio-button name="Basic">Basic</paper-radio-button>
  <paper-radio-button name="Regular">Regular</paper-radio-button>
  <paper-radio-button name="Intensive">Intensive</paper-radio-button>
</paper-radio-group>

What I actually want that everytime I the negotiation-view component is rendered, it cleans the string selectedSubs.

Thanks for your time :)

Answer 1

So I fixed it:

Instead of using this.set('route.path', path) use:

document.location.assign('/negotiating-view/' + apiId)

As is documented here assing()

Loads a new document

The word new triggered me to try this out, which solved it!