14850

[code]

    <!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>
    
[/code]

v-repeatでinputを生成する際に、input要素のv-modelにmodel_valueで設定される値(ex:
foo)をセットして、data.fooとinput要素の値を紐付けたいです。

chromeで実行するとUncaught TypeError: Cannot read property 'get' of undefined
になってしまいます。  
良いsolutionやworkaroundないでしょうか。


CC BY-SA 3.0
2015-08-26T02:40:11.850
14847
2015-08-26T15:55:51.877
2015-08-26T15:55:51.877
3639
11067
question
javascript vue.js
vue.jsでinputのv-modelの値を動的に設定したい


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

HTML:

[code]

    <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>
    
[/code]

JS:

[code]

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

参照: [Dynamic v-model directive](https://github.com/yyx990803/vue/issues/1056
"Dynamic v-model directive")


CC BY-SA 3.0
2015-08-26T04:34:22.110
14850
2015-08-26T04:34:22.110
11068
14847
answer