I'm having an issue where the App ponent and HelloWorld ponent are not getting passed data from main.js. This should be a rather simple thing to do in Vue.

You can see in the image that the root element has counter defined as 10, it's just not being populated in any of the child ponents. almost like line 12 in main.js is not taking any effect. If I click and it says 'counter: undefined'. What am I doing wrong? I've been beating my head against the wall for a few hours now.

Here is my main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({

  ponents: {App},
  data: {
    counter: 10
  },
  template: '<App :counter="counter" />',
  //puted: {
  //  counterInc: function () {
  //    return this.counter++
  //  }
  //},
  methods: {
    updateCounter (x) {
      this.counter = x
    }
  },

  render: h => h(App)
}).$mount('#app')

Here is my App.vue

<template>
  <div id="app">
    <img alt="logo" src="./assets/logo.png">
    <HelloWorld msg="Our Message" :counter="counter"/>
  </div>
</template>

<script>
import HelloWorld from './ponents/HelloWorld.vue'

export default {
  name: 'app',
  props: ['counter'] ,
  ponents: {
    HelloWorld
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

I'm having an issue where the App ponent and HelloWorld ponent are not getting passed data from main.js. This should be a rather simple thing to do in Vue.

You can see in the image that the root element has counter defined as 10, it's just not being populated in any of the child ponents. almost like line 12 in main.js is not taking any effect. If I click and it says 'counter: undefined'. What am I doing wrong? I've been beating my head against the wall for a few hours now.

Here is my main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({

  ponents: {App},
  data: {
    counter: 10
  },
  template: '<App :counter="counter" />',
  //puted: {
  //  counterInc: function () {
  //    return this.counter++
  //  }
  //},
  methods: {
    updateCounter (x) {
      this.counter = x
    }
  },

  render: h => h(App)
}).$mount('#app')

Here is my App.vue

<template>
  <div id="app">
    <img alt="logo" src="./assets/logo.png">
    <HelloWorld msg="Our Message" :counter="counter"/>
  </div>
</template>

<script>
import HelloWorld from './ponents/HelloWorld.vue'

export default {
  name: 'app',
  props: ['counter'] ,
  ponents: {
    HelloWorld
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here is my helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      Here lies all of our operations for automating some strenuous tasks. <br>
    </p>
    <h3>Get Started {{ counter }}</h3>
    <ul>
    <li><a v-on:click="updateCounter()" class="generateRollup">Generate Purchase Price</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    counter: String,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this ponent only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #0093D0;
}
.generateRollup:hover {
  cursor: pointer;
}
</style>

• javascript
• vue.js

• are sure that this code doesn't generate errors? – Boussadjra Brahim Commented Oct 2, 2018 at 20:43
• Yes 100% sure, I'm looking in chrome console and see no errors, also '"vue-cli-service serve' returns no errors. – Corey Manshack Commented Oct 2, 2018 at 22:54

3 Answers 3

So I don't personally use the render function much, but what you can do to get your code working is supply the initial template in the actual html page and mount the Vue instance to it. I've made a codepen here : https://codepen.io/crustyjew/pen/jeWPgY

The essentials are to remove your render function, add the following to html

<div id="app">
  <app :counter="counter" />
</div>

leaving .$mount('#app') to mount it to that html you provide.

If you don't want to use the template piler-included vue build, then you can implement a render function like this to pass prop values:

render: h => h(App, {
  props: {
    'counter': 10
  }
})

(Source: https://v2.vuejs/v2/guide/render-function.html#createElement-Arguments - the h argument of render functions is an alias for createElement.)

Matti gave you already an answer, but you may want to think about your project structure. It shouldn't be the goal to pass data from your root ponent to the lowest child ponent. In your case you have two options:

1. Use events to emit an event from your ponent to update the state in another ponent. See https://v2.vuejs/v2/guide/ponents-custom-events.html for more information.
2. Use a state management like vuex. Vuex is used to handle you state globally. You can access the state with getters from all your ponents, without passing your data manually to each ponent, which needs access to the data. Furthermore vuex provides actions/mutations, which allows you to update the state. For more information see https://vuex.vuejs/.

For small projects vuex might be to much overhead for an equal result. But if you project gets bigger and bigger it's really hard to know what's going on in your ponents, when passing data through multiple ponents.