CODEWITHSUNDEEP
javascriptvue.js
Luca Reghellin
Luca Reghellin

Reputation: 8103

How to make Vue auto-instantiate components on init?

I'm new to Vue, I'm doing some tests.

Vue.component('area-selectors-box', {
  template: `
    <div class="selectors-box">
      <select v-for="select in selects">
        <option>test</option>
      </select>
    </div>
  `,
  props:['selects']
});

var dealer_manager = new Vue({
  el: '#dealers-main-box'
  ,data:{
    dealers:[],
    selects:[{name:'select-1'},{name:'select-2'}]
  }
  ,mounted: function(){
  }
  ,created: function(){
  }
  ,methods: {

  }
});

...And later in html:

<area-selectors-box></area-selectors-box>

But it will only output <div class="selectors-box"></div>, not the selects.

Why? What am I doing wrong?

Upvotes: 1

Views: 83

Answers (2)

Daniel Danaee
Daniel Danaee

Reputation: 290

I'm glad :) If you ever encounter rendering issues, speaking from experience with JS frameworks, often its the data not being able to be found or loaded. Good luck!

Upvotes: 1

Luca Reghellin
Luca Reghellin

Reputation: 8103

Thank to @Daniel Danaee, I found out I missed a step. On my html I had to reference the binded property like this:

<area-selectors-box v-bind:selects="selects"></area-selectors-box>

Upvotes: 2

Related Questions