Vue.js Binding Dynamic Models -

i'm trying create series of select tags array of dynamic properties.

refering documentation on dynamic select options

however, don't know model name before data, need create v-model binding dynamic value.

any ideas ?

code on jsfiddle

html

<div id="selectapp">  <div v-repeat="dynamicselects">      {{key}}      <!--this works: <select v-model="setreps1" options="setreps1"></select> -->     <select v-model="{{key}}" options="{{key}}"></select>  </div>     <pre>{{$data|json}}</pre> 

js

new vue({      el: document.queryselector("#selectapp"),      data: {          dynamicselects: [             {key: "setreps1"}         ],          setreps1: [              { text: '0', value: '0' },             { text: '1', value: '1' }          ]      } }); 

*update fiddler link *

so figured out way this, creating select component.

codepen

<script id="sselect-template" type="x-template">   <select v-model="data.selected" options="data.items"></select> </script>  <div id="app">    <div v-repeat="lists">        <sselect data="{{lists[$index]}}"></sselect>     </div> </div>