Vue.js: access global value in template string

Question

I have a very basic Vue.js app that looks like this:

index.html (just the <body> for succinctness)

<div id="root"></div>

main.js

var config = {
  title: 'My App',
}

new Vue({
  el: '#root',
  template: '<div>{{ config.title }}</div>',
})

This gives me:

Property or method "config" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in root instance)

I'm guessing it's because Vue is looking for it in the data store rather than window. Is there some way to signal that config is a global here, or a better way to do this entirely? I suppose I could pass the config object as a prop to my root Vue instance, but it seems like only components accept props. Thanks for any insights on this.

Why don't you just pass it to the Vue instance? data : { config : config }, — Luka Jacobowitz
– Luka Jacobowitz, Commented Dec 13, 2016 at 17:30

Mani Jagadeesan · Accepted Answer · 2016-12-13 17:31:47Z

6

You can try to define your app as follows:

new Vue({
  el: '#root',
  template: '<div>{{ config.title }}</div>',
  data: function() {
    return {
      config: window.config
    }
  }
})

In the above definition, your this.config within the root component points to window.config - the global variable.

answered Dec 13, 2016 at 17:31

Mani Jagadeesan

24.3k6 gold badges70 silver badges54 bronze badges

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

Comments

Clay Allen · Accepted Answer · 2016-12-13 19:58:56Z

If you are just trying to pass the App Name in as a hard-coded string you can do something like this:

var nameMyApp = new Vue({
  el: '#root',
  data: { input: 'My App' },
  computed: {
    whosapp: function () {
      return this.input
    }
  }

})

With your html like this:

<div id="root">
  <div v-html="whosapp"></div>
</div>

Which will pass the value of input to the whosapp div.

But, if you're looking for something more dynamic, this would be the way to go:

With the same html as above...

var nameMyApp = new Vue({
  el: '#root',
  data: { input: 'My App' },

The initial value is set to My App, which is what will display if not changed through a function call on the method.

    methods: {
    update: function(name) {
        this.input = name;
    }
  },

Here is where we define a method that, when called, passes in the parameter to update this.input.

  computed: {
    whosapp: function () {
      return this.input
    }
  }

})

nameMyApp.update("New Name");

And here is where we call the function, giving it the new parameter; making sure that the parameter is a string.

I hope this is what you're looking for.

Collectives™ on Stack Overflow

Vue.js: access global value in template string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related