伙計們，我被困在我的作業中，我無法將 html 中的資料添加到 VUE.JS 的陣列中我現在已經構建了這個表單我想要的是當用戶完成這個表單并按下添加一個應該添加的新學生按鈕時vue.js 中 Student 陣列中的所有資料，但是 Idk 如何通過按下按鈕來更新陣列，如果有人可以幫助我，這將是我的完整代碼按下時洗掉該行：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/[email protected]/dist/vue.js"></script>
<style>
.agreeGreen {
color: Green;
}
.agreeRed {
color: Red;
}
</style>
</head>
<body>
<div id="app">
<h2>Student Information Collection</h2>
<hr>
<form >
<div >
<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" >Add a new student</button>
</form>
<h2>Students list</h2>
<hr>
<table id="rounded-corner">
<thead>
<th >Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
<th>Hobby</th>
<th>Receive Promotions</th>
<th >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>
uj5u.com熱心網友回復：
正如我在評論中提到的，您必須將代碼轉換為 Vue 格式。您必須使用v-model雙向資料系結，然后單擊按鈕，您必須觸發一個@click事件才能獲取所有欄位v-model值，然后將資料推送到學生陣列中。
我剛剛創建了一個帶有單個input欄位的示例演示。您可以在其他領域以相同的方式實作。
試試這個：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473052.html
標籤：javascript Vue.js