current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

share|improve this question
1  
Why don't you just pass it to the Vue instance? data : { config : config }, – Luka Jacobowitz Dec 13 '16 at 17:30
up vote 1 down vote accepted

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.