如何從 html 向 Vue.JS 數組中添加數據

Question

伙計們，我被困在我的作業中，我無法將 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/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>

Answer 1

正如我在評論中提到的，您必須將代碼轉換為 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>

如何從 html 向 Vue.JS 數組中添加數據

問題描述

1 個解決方案

解決方案1
0 已采納 2022-05-13 13:38:40

如何從 html 向 Vue.JS 數組中添加數據

問題描述

1 個解決方案

解決方案1 0 已采納 2022-05-13 13:38:40

解決方案1
0 已采納 2022-05-13 13:38:40