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中添加

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

但是它只会输出<div class="selectors-box"></div>，而不输出选择内容。

为什么？我在做什么错了？

Answer 1

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

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

Answer 2

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

如何使Vue在初始化时自动实例化组件？

2 个答案: