Render children in vue.js Компоненты

Question

Как я могу выбрать опцию в vue.js. React имеет что-то вроде this.props.children, которое я использовал для таких случаев. Как я могу решить это в vue.js?

Я попытался также получить доступ к детям с $ детьми, но всегда был пустой массив.

В этом примере в selectbox нет опции. Добавили пример также на jsFiddle: https://jsfiddle.net/kt8urx7d/

var FormComp = Vue.extend({ 
 
    template: '#form-comp' 
 
}); 
 
Vue.component('form-comp', FormComp); 
 

 
var SelectField = Vue.extend({ 
 
    template: '#select-field' 
 
}); 
 
Vue.component('select-field', SelectField); 
 

 
var SelectFieldOption = Vue.extend({ 
 
    template: '#select-field-option' 
 
}); 
 
Vue.component('select-field-option', SelectFieldOption); 
 

 

 
new Vue({ 
 
    el: '#container', 
 
    template: '<form-comp></form-comp>' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 

 
<script type="x/template" id="form-comp"> 
 
\t <form> 
 
    \t <h1>This is my Form</h1> 
 
    \t <select-field name="my-select-field"> 
 
    \t <select-field-option value="my-value-1">My Text 1</select-field-option> 
 
     <select-field-option value="my-value-2">My Text 2</select-field-option> 
 
    </select-field> 
 
    </form> 
 
</script> 
 

 
<script type="x/template" id="select-field"> 
 
\t <select name="{{ name }}"> 
 
    \t <!-- include children: select-field-option --> 
 
    </select> 
 
</script> 
 

 
<script type="x/template" id="select-field-option"> 
 
\t <option value="{{ value }}">{{ content }}</option> 
 
</script> 
 

 
<div id="container"></div>

Answer 1

Есть некоторые проблемы в том, как вы рендеринга элементов внутри шаблона компонента. Взгляните на это: https://vuejs.org/guide/components.html#Content-Distribution-with-Slots

С другой стороны, Vue использует систему рендеринга HTML браузера, что означает, что элементы, которые «предполагается» внутри элемента HTML, будут отброшены. Например, Vue ожидает option внутри select, а не select-field-option. Чтобы преодолеть это ограничение, вы можете:

<option is="select-field-option" value="lalala"></option> 

Пересмотрите, как вы используете шаблоны внутри компонентов. Это может быть полезно для головного хоста: https://jsfiddle.net/kt8urx7d/5/