2
<!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ないでしょうか。

1 件の回答 1

3

こんな感じでどうでしょうか?

HTML:

<div id="myapp">
  <div v-repeat="input in inputs" class="form-group">
    <label>{{input.label}}</label>
    <input type="text" v-model="form[input.model_value]" class="form-control" name="{{input.label}}"></input>
  </div>
</div>

JS:

var vm = new Vue({
  el: '#myapp',
  data: {
    form: {
      foo: "FOO",
      bar: "BAR"
    },
    inputs: [
      { label: 'foo', model_value: 'foo' },
      { label: 'bar', model_value: 'bar' }
    ]
  }
});

参照: Dynamic v-model directive

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。