Adding data to a Vue.JS array from an HTML source

Question

Adding data to a Vue.JS array from an HTML source

I'm facing a challenge with my assignment where I am struggling to input data from HTML into the VUE.JS array. I have created this form, and now I need assistance in updating the Students array in Vue.js when a user completes the form and clicks on the "Add a new student" button. I am unsure about how to update the array upon button click. Below is the complete code. Any help would be greatly appreciated! Also, I need guidance on making the delete button functional so that it removes a row when clicked.

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ee8ebfbdeacb0a8b0afaa">[email protected]</a>/dist/vue.js"></script>
    <style>
        .agreeGreen {
            color: Green;
        }
        .agreeRed {
            color: Red;
        }
    </style>
</head>
...

javascript vue.js

Answer 1

Answer №1

To make your code work in Vue format, you need to utilize v-model for two-way data binding and then trigger a @click event on button click to retrieve the values of all fields bound with v-model and add this data to the students array.

I have created a simple demo using a single input field. The same approach can be applied to other fields as well.

Give this a try:

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>

Answer 2

To make your code work in Vue format, you need to utilize v-model for two-way data binding and then trigger a @click event on button click to retrieve the values of all fields bound with v-model and add this data to the students array.

I have created a simple demo using a single input field. The same approach can be applied to other fields as well.

Give this a try:

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>

Adding data to a Vue.JS array from an HTML source

Answer №1

Similar questions

Syntax for chained arrow functions

Stopping errors are a common occurrence in synchronous AJAX

End of container Bootstrap 4 row with two columns at the edge

Creating an executable JAR for your Next.js application: A step-by-step guide

ui-grid row size set to automatically adjust using rowHeight : 'auto'

What causes axios to return a z_buf_error?

Displaying Buffered Geometry in React-Three-Fiber

Is there a intentional way to cause my node.js server to crash?

Encountering a Issue with POST Method in AngularJS Calling .NET WebAPI

Altering the input type of a cloned element in Internet Explorer results in the loss of the value

Personalizing a Doughnut Graph

JSON did not anticipate the presence of token at the beginning position

Optimally align child divs within container in row and column layouts

JavaScript function for dividing the table into months

What steps do I need to take to successfully integrate Font Awesome 5 with React?

Adding metadata fields to an existing Markdown file within TinaCMS

Even when hovering out, jQuery maintains its hover styles

information not adhering to the text field

Are you ready to maximize your Selenium expertise?

Customize the appearance of each element in ng-repeat individually