Vue JS - Access root computed property inside a component

Question

I'm attempting to access a computed property from the root Vue instance and access it inside a component. The <p class="currency"> element which is output outside of the component template outputs {{ currency }} correctly, but when trying to access {{ currency }} inside of the component nothing is output. I have tried setting currency as a prop but this doesn't appear to make any difference. I'm sure there must be a way to access the root Vue instance from within the component, something like {{ vm.currency }} but again I have tried this to no avail.

Here is the HTML.

<div id="app">

  <ul class="plans">

    <plan-component : name="Basic" ></plan-component>

    <plan-component : name="Rec" ></plan-component>

    <plan-component : name="Team" ></plan-component>

    <plan-component : name="Club" ></plan-component>
  </ul>

  <template id="plan-component">
    <li>
      <h2 class="plan-name">{{ name }}</h2>
      <h3 class="plan-cost">{{ currency }}</h3>
    </li>
  </template>

  <p class="currency">{{ currency }}</p>

</div><!-- end #app -->

Here is the JS. The variable countryCode is defined elsewhere in my app, but like I said {{ currency }} is working outside of the component so this isn't an issue.

Vue.component('plan-component', {
  template: '#plan-component',

  props: {
    name: String,
  }
});

var vm = new Vue({
  el: '#app',

  computed: {
    currency: function() {
      if(countryCode === 'GB') {
        return "£";
      } else {
        return "$";
      }
    }
  }
});

It says this in the question: "The variable countryCode is defined elsewhere in my app, but like I said {{ currency }} is working outside of the component so this isn't an issue." — GuerillaRadio
– GuerillaRadio, Commented Jul 11, 2016 at 12:04

GuerillaRadio · Accepted Answer · 2016-07-11 16:22:49Z

11

For anyone with the same issue, you simply need to define $root before the property. So in my example instead of this...

<h3 class="plan-cost">{{ currency }}</h3>

...it needs to be this...

<h3 class="plan-cost">{{ $root.currency }}</h3>

The VueJS docs do talk about this under the Parent Chain section of Components.

answered Jul 11, 2016 at 16:22

GuerillaRadio

1,3175 gold badges30 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vbranden Over a year ago

You can also use vuex to do this

kcpr Over a year ago

It's also possible to create a computed property: computed: { currency() { return this.$root.currency } } and then use it in HTML just as {{ currency }}.

Collectives™ on Stack Overflow

Vue JS - Access root computed property inside a component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related