vue.jsでinputのv-modelの値を動的に設定したい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Vue.js Practice</title>
</head>
<body>
<div id="myapp">
<div v-repeat="input in inputs" class="form-group">
<label>{{input.label}}</label>
<input type="text" v-model="{{input.model_value}}" class="form-control" name="{{name}}"> </input>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.min.js"></script>
<script>
// v-repeat
var vm = new Vue({
el: '#myapp',
data: {
foo: "FOO",
bar: "BAR",
inputs: [
{label: 'foo', model_value: 'foo'},
{label: 'bar', model_value: 'bar'}
]
}
});
</script>
</body>
</html>
v-repeatでinputを生成する際に、input要素のv-modelにmodel_valueで設定される値(ex: foo)をセットして、data.fooとinput要素の値を紐付けたいです。
chromeで実行するとUncaught TypeError: Cannot read property 'get' of undefined になってしまいます。
良いsolutionやworkaroundないでしょうか。