How to set/get root data context

:one: :page_facing_up: dashboard.f7.html

// inside mounted hook
var self = this;
console.log(self.$root.VehicleAvailable); // shows undefined
console.log(self.$root.VehiclesInYard); // shows undefined
console.log(self.$root.VehiclesInPlant); // shows undefined
console.log(self.$root.VehicleOnTrip); // shows undefined

:two: :page_facing_up: app.js

  // ...
  // root data
  data: function () {
    return {
      VehicleAvailable: 0,
      VehiclesInYard: 0,
      VehiclesInPlant: 0,
      VehicleOnTrip: 0,
    };
  }, 
// ...

:three: :page_facing_up: dashboard.f7.html

<div class="card-footer" style="background: #fec825; color: #ffffff; font-weight: 700">
    {{@root.VehicleAvailable}}
<!-- do not update the html here-->
</div>

:four: :page_facing_up: dashboard.f7.html

  • Inside mounted hook there is an ajax call to update root
  • self.$root.VehicleAvailable = res.data[0].VehicleAvailable;
  • do not updates html

You have to use self.$root.$setState({ name: value }) or call self.$root.update() if you have updated manually like your example.

1 Like