如何在 html 的 Vue.JS 数组中添加数据

Question

伙计们，我无法将 html 中的数据添加到 VUE.JS 的数组中，现在我已经构建了这个表单，我想要的是当用户完成此表单时然后按添加一个新学生按钮，它应该在 vue.js 中添加 Students 数组中的所有数据，但是我知道如何通过按下按钮来更新数组，这是我的完整代码，如果有人可以帮助我的话，它将是太棒了，还帮助我使这个删除按钮像按下它时删除行一样工作：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 进行 two-way 数据绑定，然后在单击按钮时您必须触发一个 @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 数组中添加数据

How to add data in an array of Vue.JS from html

javascript

vue.js