CODEWITHSUNDEEP
vue.jsvuejs2vue-component
asselinpaul
asselinpaul

Reputation: 386

Rendering more than one .vue component

Right now my Vue is rendering the component dnaMoleculeFileInfo. How can I add another component to be rendered with its own props?

var app = new Vue({
    el: '#app',
    render: h => h(dnaMoleculeFileInfo, {
        props: {
            format: data.dnamoleculefile.format,
            id: data.dnamoleculefile.id,
            name: data.dnamoleculefile.name,
            sequence: data.sequence.bases,
            sequenceLength: data.length
        }
    })
})

Upvotes: 0

Views: 281

Answers (1)

Bert
Bert

Reputation: 82489

Something like this.

console.clear()

const dnaMoleculeFileInfo = {
  template:`<h2>I'm a dnaMoleculeFileInfo</h2>`
}

const someOtherComponent = {
  template:`<h2>I'm some other component</h2>`
}

var app = new Vue({
    el: '#app',
    render(h){
      // Add the props you want to these two components
      const dna = h(dnaMoleculeFileInfo)
      const other = h(someOtherComponent)
      // return a container with both of them as children
      return h("div", [dna, other])
    }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app"></div>

Upvotes: 4

Related Questions