Guys I am stuck on my assignment where I am not able to add data from html to the array of VUE.JS I have build this form now what I want is when user complete this form and press Add a new student button it supposed to add all the data inside Students array in vue.js but Idk how to update the array with pressing of a button here is my full code if someone can help me with that it will be awesome and also help me to make this delete button work like it delete the row when you press it :slight_smile:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
<!--
/* @import url("css/tablestyle.css");
@import url("css/form.css"); */
-->
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
.agreeGreen {
color: Green;
}
.agreeRed {
color: Red;
}
</style>
</head>
<body>
<div id="app">
<h2>Student Information Collection</h2>
<hr>
<form class="basic-grey">
<div class=" form-group">
<label for="name">Student Name:</label><input id="name" type="text">
</div>
<label>Gender:</label>
Male<input type="radio">
Female<input type="radio"> <br /><br />
<label for="age">Age:</label><input id="age" type="number"> <br /><br />
<label>Country:</label>
<select>
<option disabled selected value="">Please select your country</option>
<option v-for="country in countries"></option>
<option>{{country.China}}</option>
<option>{{country.Zambia}}</option>
<option>{{country.Pakistan}}</option>
<option>{{country.Bangladesh}}</option>
<option>{{country.India}}</option>
</select>
<label>Hobby:</label>
<span><input type="checkbox" >Study</span>
<span><input type="checkbox" >Play Video Games</span>
<span><input type="checkbox" >Travelling</span>
<span><input type="checkbox" >Eating</span>
<br /><br />
<label>Other Information:</label>
<textarea></textarea> <br /><br />
<input type="checkbox"><span>Agree receive our
promotions.</span><br><br>
<button type="submit" class="button">Add a new student</button>
</form>
<h2>Students list</h2>
<hr>
<table id="rounded-corner">
<thead>
<th class="rounded-company">Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
<th>Hobby</th>
<th>Receive Promotions</th>
<th class="rounded-q4">Operation</th>
</thead>
<tbody>
<tr v-for="student in students">
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
<td>{{student.age}}</td>
<td>{{student.country}}</td>
<td>{{student.hobby}}</td>
<td>{{student.agree}}</td>
<td><a href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
student: {
name: "",
gender: "male",
age: 0,
country: "",
hobby: [],
otherInformation: "",
agree: ""
},
students: [{
name: "Mike",
gender: "male",
age: 23,
country: "ZM",
hobby: ["Studying"],
otherInformation: "I want say nothing but try your best.",
agree: false
},
{
name: "Emma",
gender: "famale",
age: 18,
country: "PK",
hobby: ["Playing Game",
"Travelling"
],
otherInformation: "Please contact me anytime.",
agree: true
},
{
name: "Emily",
gender: "famale",
age: 20,
country: "BD",
hobby: ["Studying", "Eating", "Travelling"],
otherInformation: "Tell me your problem.",
agree: false
}
],
country: {
China: "CN",
Zambia: "ZM",
Bangladesh: "BD",
India: "IN",
Pakistan: "PK"
},
hobbies: ["Studying", "Playing Game", "Eating", "Travelling"]
},
});
</script>
</body>
</html>
Advertisement
Answer
As I mentioned in the comment, You have to convert your code in Vue format. You have to use v-model for two-way data binding and then on button click you have to trigger a @click event just to get all the fields v-model value and then push the data in students array.
I just created a sample demo with a single input field. You can achieve in same way for other fields.
Try this :
new Vue({
el: '#app',
data: {
student: {
name: null
},
students: [{
name: "Mike",
}, {
name: "Emma",
}, {
name: "Emily",
}],
},
methods: {
addStudent() {
if (this.student.name) {
this.students.push({name: this.student.name})
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form>
<div class=" form-group">
<label for="name">Student Name:</label><input id="name" v-model="student.name" type="text">
</div><br>
<button type="button" @click="addStudent">Add a new student</button>
</form>
<h2>Students list</h2>
<hr>
<table>
<thead>
<th>Name</th>
</thead>
<tbody>
<tr v-for="student in students">
<td>{{student.name}}</td>
<td><a href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>