1

I require two js files in my app. the first(app.js) is to be general js file that all pages/views would use. The second(page1.js) is to be a page/view specific js file.

I instantiate a new Vue instance in app.js like so:

new Vue({
  el : '#app',
  data: {
    balance: 0
  },
  ready: function() {

  },
  methods : {

  },
})

Next, in the page1.js file I instantiate another Vue instance like so:

new Vue({
  el : '#headerSection',
  data: {

  },
  ready: function() {
    console.log(this.balance)
  },
  methods : {

  },
})

However, when I try to access the balance data object I get an error of undefined.

In the html I require the app.js file before the page1.js

I suspect my second instantiation of the Vue Instance is overwriting the first instance.

How do I go about separating the Vue elements over two js files?

2
  • This might solve your problem: stackoverflow.com/questions/32752527/… Commented Sep 24, 2015 at 9:10
  • you need a reference to your app.js vue object. you can create a global namespace like this: (function(){ window.App = {}; })(); then do App.FirstVue = new Vue and you can reference it something like this App.FirstVue.data.balance; Commented Dec 14, 2016 at 19:01

1 Answer 1

1

You probably want to use the Vue component system instead of multiple independent View Models:

http://vuejs.org/guide/index.html#Components

This allows you to create a hierarchy of View Models that can interact with each other quite easily. You can put the javascript for them in multiple files without any problems.

In your particular case, you are creating two separate View Models that are overlapping in the same DOM but are otherwise not related to each other. The first one will compile all of the DOM below it and the second one will have no effect (or at least that's what seems to be happening).

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.