如何让Vue在init上自动实例化组件？

Question

我刚来Vue，我在做一些测试。

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: {

  }
});

稍后在html中的...And：

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

但它将只输出<div class="selectors-box"></div>，而不是selects。

为什么？我做错了什么？

Answer 1

感谢@Daniel Danaee，我发现我漏掉了一步。在我的html上，我必须像这样引用绑定的属性：

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

Answer 2

我很高兴:)如果你遇到过渲染问题，从JS框架的经验来看，经常是数据无法找到或加载。祝好运!