vue如何循环input获取里面的值？

Question

点击+号 数量加1，数量有多少，那么就循环input就有多少个。如何获取里面的input的值。

<div id="app">
  <div class='head'>
    <span class='num'>{{num}}</span>
   <input type="button" @click='add()' value="+">
  </div>
  <div class='goodslist' v-for="(item,index) in num"> 
     <div>
       <span>兑换码</span>
       <input type="text" />
     </div>
  </div>
</div>

 new Vue({
      el:'#app',
    data:{
        num:4
    },
    methods:{
        add(){ 
          this.num++;  
      }
    }
  })

http://jsrun.net/7rhKp/edit

Answer 1

数据的双向绑定，对input进行绑定，如下(数组会做相应的变通，value换成数组)：

<input type="text" v-model="value" />
data:{
    value:''
},

Answer 2

iviewui 动态增减表单项 这个你可以参考下思路，就是把你的input和index关联起来。

Answer 3

<div id="app">
  <div class='head'>
    <span class='num'>{{num.length}}</span>
   <input type="button" @click='add()' value="+">
  </div>
  <div class='goodslist' v-for="(item,index) in num"> 
     <div>
       <span>兑换码</span>
       <input type="text" v-model="item"/>
     </div>
  </div>
</div>

 new Vue({
      el:'#app',
    data:{
        num:['','','','']
    },
    methods:{
        add(){ 
          this.num.push('');
      }
    }
  })//循环num就能得到所有值了

Answer 4

<div id="app">
  <div class='head'>
    <span class='num'>{{codes.length}}</span>
   <input type="button" @click='add()' value="+">
  </div>
  <div class='goodslist' v-for="(item,index) in codes"> 
     <div>
       <span>兑换码</span>
       <input type="text" v-model="codes[index]" />
     </div>
  </div>
  <div>{{codes}}</div>
</div>

  new Vue({
      el:'#app',
    data:{
        codes:['1']
    },
    methods:{
        add(){ 
          this.codes.push('');
      }
    }
  })