2017-03-20 6 views
3

は、カスタムコンポーネントの選択である、それは動作しますが、私は、コードの一部を理解することはできません、レンダリング機能でのdomPropsの使用方法は?ここ

jsFiddle

Vue.component("myselect", { 
    props: ['option'], 
    render: function (createElement) { 
     var self = this  
     var items = [] 
     for (var i = 0; i < 16; i++) { 
      items.push(createElement('option', { attrs: { value: i } }, i)) 
     } 

     return createElement('select', { 

      domProps: { value: self.option.value }, // v-bind:value = this binds the default value 
      on: { 
       input: function (event) { 
        console.log(event.target.value) 
       } 
      } 
     }, items) 
    } 
}) 

、これは、option.valueに選択のデフォルト値を設定し、それは<select value='2'>ですhtml selectタグは<option selected>を使用しています。私には魔法のようです。

答えて

1

domPropsは、element propertiesを指し、の属性はではありません。少なくとも、このようなものとして、それの

だと思う...

document.getElementById('mySelect').value = 'Two'
<select id="mySelect"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
    <option>Four</option> 
 
</select>

あなたはselect要素にvalueプロパティを設定すると、それは対応する値とオプションを選択します( FirefoxとChrome)。

関連する問題