VueJS Passing data Through render

Question

I'm currently working with VueJS 2, I would like to pass some params from the HTML to the VueJS component. Let me show you.

My Html Div looks like this :

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

And my javascript :

new Vue({
  store, // inject store to all children
  el: '#app',
  render: h => h(App)
});

My App Component:

<template>
  <div>
    {{ id }}
  </div>
</template>
<script>
export default {
  props: {
   id: Number
  }
}
</script>

I would like to get the id passed in the Html, in my App component. How should I do ?

Answer 1

Here is one way.

<div id="app" data-initial-value="125"></div>

new Vue({
  el: '#app',
  render: h => h(App, {
    props:{
      id: document.querySelector("#app").dataset.initialValue
    }
  })
})

But you don't have to use a render function.

new Vue({
  el: '#app',
  template:"<app :id='id'></app>",
  data:{
    id: document.querySelector("#app").dataset.initialValue
  },
  components:{
    App
  }
})

Also, I'm using querySelector assuming you rendered initialValue (instead of id) to the page as an attribute, but you could just as easily put it somewhere else on the page like a hidden input or something. Really doesn't matter.