[英]Dynamically add rows to form using Vue.JS
I'm trying to make a dynamic form using Vue.我正在尝试使用 Vue 制作动态表单。 User clicks the add button and another row appears for them to add data.
用户单击添加按钮,然后出现另一行供他们添加数据。 The problem is, i initially set only 1 row at first but , when i put the v-for on the div, 3 extra rows started appearing.
问题是,我最初只设置了 1 行,但是当我将 v-for 放在 div 上时,开始出现 3 行额外的行。 I'm confused as to why that happened?
我很困惑为什么会这样? Plus, nothing happen when i click the add button.
另外,当我单击添加按钮时什么也没有发生。 Thanks.
谢谢。
Dynamic vue form动态vue表单
Componenet组件网
<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> 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> Export to Microsoft Excel</button>
</div>
</div>
</div>
Script脚本
export default {
data(){
return{
users:{
username:'',
password:'',
email:'',
phone:''
}
}
},
methods:{
addMoreData(index){
this.users.push({
username: '',
password:'',
email:'',
phone:''
});
}
},
mounted() {
console.log('Component mounted.')
}
}
Your data should be an array that contains objects as items.您的数据应该是一个包含对象作为项目的数组。 In your example, v-for directive iterate properties in one object.
在您的示例中, v-for 指令迭代一个对象中的属性。
data(){
return{
users: [{
username:'',
password:'',
email:'',
phone:''
}]
}
},
Or use vue-autoextra, and avoid having to add a button add something to a collection:或者使用 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>
<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> Add More Data
</button>
Why did you put @click="addMoreData(index)"
inside <span>
element ?你为什么把
@click="addMoreData(index)"
放在<span>
元素中? It doesn't make any sense ... and it certainly won't work!这没有任何意义……而且肯定行不通! Are
index
and users
variables accessible here ?此处是否可以访问
index
和users
变量? They're not!他们不是!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.