[Vuejs]-How to pass data into Vue instance so that subsequent updates are reflected?

by

0👍

There are multiple problems with your code

  1. Everything inside <div id="app"> is treated by the Vue as a template and compiled – see the docs

If neither render function nor template option is present, the in-DOM HTML of the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.

Including <script> tag there is wrong. Just try to include vue.js (debug build) instead of vue.min.js (minified production build of Vue) and you will see bunch of errors (btw its always good idea to use debug build for development as it gives you lots of useful errors and warnings)

The fact that it "somehow works" in prod build (ie the initial values are shown on the page) doesn’t mean it’s supported…

  1. So the inside of <div id="app"> is template for Vue. As I said before in the comments, all data referenced by template must be in the context of Vue instance. You cannot pass some global variable into props. So moving <script> outside of <div id="app"> won’t help

[Vue warn]: Property or method "seedData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initialising the property.

What you can do is to pass seedData object into root Vue instance like this:

       var vm = new Vue({
          el: '#app',
          data: {
            seedData: seedData
          } 
        });

Now the errors are gone but data changes is not reflected still. Reason for that is not Vue specific. Its simple JavaScript. Object are passed by reference in JS. Look at this code:

var a = { name: 'John' }
var b = a
a = { name: 'Smith' }
// b is still pointing to "John" object

To workaround it, don’t replace whole object. Just mutate it’s properties (beware of Vue reactivity caveats)

      setInterval(function() {
          seedData.name = 'John';
          seedData.percent = Math.random();
      }, 1000)

Whole solution:

Vue.component('offers', {
  template: '<h1>{{ parentData.name }}: {{ parentData.percent }}</h1>',
  props: {
    parentData: {
      default: () => ({
        percent: 0,
        name: 'John'
      }),
      type: Object
    },
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data: {
    seedData: seedData
  } 
});
<script>
      var seedData = {
        percent: 60,
        name: 'Smith'
      }
      setInterval(function() {
          seedData.name = 'John';
          seedData.percent = Math.random();
      }, 1000)
    </script>
    <div id="app">      
      <offers :parent-data="seedData"></offers>
    </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

Leave a comment