使用 Vue.JS 动态添加行到表单答案

【问题标题】：Dynamically add rows to form using Vue.JS使用 Vue.JS 动态添加行到表单
【发布时间】：2019-10-17 15:05:01
【问题描述】：

我正在尝试使用 Vue 制作动态表单。用户单击添加按钮，会出现另一行供他们添加数据。问题是，我最初只设置了 1 行，但是当我将 v-for 放在 div 上时，开始出现 3 额外的行。我很困惑为什么会这样？另外，当我单击添加按钮时，什么也没有发生。谢谢。

动态vue表单

组件网

<div class="container">
<title>exportDATA | Web to Excel</title>
<div class="mt-4">
        <div class="jumbotron bg-dark col-md-10 offset-md-1">
                <div class="card card-body bg-dark" v-for="(user,index) in users" :key="index">
                   <form>
                        <div class="row">
                            <div class="form-group col-md-3">
                                <label for="email" class="text-white">Username:</label>
                                <input type="text" class="form-control" id="username" v-model="user.username">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="pwd" class="text-white">Password:</label>
                                <input type="password" class="form-control" id="password" v-model="user.password">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="pwd" class="text-white">Phone Number:</label>
                                <input type="text" class="form-control" id="phone" v-model="user.phone">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="pwd" class="text-white">Email</label>
                                <input type="email" class="form-control" id="email" v-model="user.email">
                            </div>
                        </div>
                    </form>
                </div>            
             <br>
                <button class="btn btn-secondary float-right" title="Click to add row"><span class="fa fa-plus-square" @click="addMoreData(index)" v-show="index == users.length-1"></span> &nbsp;Add More Data</button>
        </div>

        <div class="jumbotron bg-dark col-md-10 offset-md-1 ">
            <button class="btn btn-success col-md-6 offset-md-3 p-3"><span class="fa fa-plus-square"></span> &nbsp;Export to Microsoft Excel</button>
        </div>            
</div>
</div>

脚本

    export default {
    data(){
      return{   
          users:{
              username:'',
              password:'',
              email:'',
              phone:''
          }
      }
    },
    methods:{
        addMoreData(index){
            this.users.push({ 
                username: '',
                password:'',
                email:'',
                phone:''
                });
        }

    },
    mounted() {
        console.log('Component mounted.')
    }
}

【问题讨论】：

users 是一个“对象”，而不是一个数组 - 在“addMoreData()”中推送是不正确的

标签： javascript forms vue.js

【解决方案1】：

您的数据应该是一个包含对象作为项目的数组。在您的示例中， v-for 指令在一个对象中迭代属性。

data(){
      return{   
          users: [{
              username:'',
              password:'',
              email:'',
              phone:''
          }]
      }
    },

【讨论】：

【解决方案2】：

或者使用 vue-autoextra，并且避免必须添加一个按钮来添加一些东西到一个集合中：

Vue.config.devtools = false
Vue.config.productionTip = false
const app = new Vue({
  el: '#app',
  data () {
    return {
      users: [
        { name: 'Alice', password: 'xyz' },
      ]
    }
  },
  components: {
    Autoextra
  }
})

@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css";
.last {
  opacity: .5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/vue-autoextra@0.2.0/dist/vue-autoextra.min.js"></script>

    <div class="container" id="app">
      <div class="columns">
        <div class="column">
          <autoextra :collection="users" v-slot="{item,last,index}">
            <div class="columns is-mobile" :class="{last: last}">
              <div class="field column">
                <div class="control">
                  <label class="label">{{last ? 'New ' : ''}}User {{!last ? index + 1 : ''}}</label>
                  <input class="input" type="text" v-model="item.name"/>
                </div>
              </div>
              <div class="field column">
                <label class="label">Password</label>
                <div class="control">
                  <input class="input" type="password" v-model="item.password"/>
                </div>
              </div>            
            </div>
          </autoextra> 
        </div>
        <div class="column">
          <pre>{{users}}</pre>
        </div>

      </div>
    </div>

【讨论】：

【解决方案3】：

<button class="btn btn-secondary float-right" title="Click to add row">
<span class="fa fa-plus-square" @click="addMoreData(index)" v-show="index == users.length-1"></span> &nbsp;Add More Data
</button>

为什么将@click="addMoreData(index)" 放在<span> 元素中？这没有任何意义……而且肯定行不通！ index 和 users 变量可以在这里访问吗？他们不是！

【讨论】：