Insert the latest information into the table following the completion of the form in VueJS

Question

Insert the latest information into the table following the completion of the form in VueJS

When making a POST request to submit data using an endpoint, such as http://localhost:3000/entry, with keys like fname, lname, and age, the submission is successful. However, I am facing an issue where upon form submission, it redirects to the endpoint itself instead of staying on the current page. My project is built using VueJS.

In addition, there is another endpoint available at http://localhost:3000/entries (GET) which returns existing entries in JSON format, for example:

[
    {
        "_id": "5b48a137c3b2a3454b853a3c",
        "fname": "John",
        "lname": "Jose",
        "age": "28",
        "__v": 0
    },
    {
        "_id": "5b506cc7d9105012f59c87e6",
        "fname": "Alex",
        "lname": "Cruz",
        "age": "27",
        "__v": 0
    }
]

Instead of redirecting when submitting the form, my goal is to update the HTML table with the latest data from the API endpoint http://localhost:3000/entries.

In the provided code snippets, index.html mentions the necessary scripts and styles for vue.js implementation, along with form elements and a table structure for displaying data. The script.js file includes Vue instance creation with data properties and methods for form validation. Lastly, an updated version of the table structure is given to handle dynamic rendering of entry details fetched from the API endpoint.

javascript post vue.js

Answer 1

Answer №1

In the method checkForm, if anything is typed in the fname-input, it returns before e.preventDefault() is executed. To prevent form navigation, move e.preventDefault() to the beginning of the method.

Additionally, the last name input also utilizes fname as v-model.

To display data in the table, you can use the following approach:

index.html

<table style="width:100%">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    <tr v-for="(row, index) in table" :key="index">
        <td>{{row.fname}}</td>
        <td>{{row.lname}}</td>
        <td>{{row.age}}</td>
    </tr>
</table>

script.js

data: {
    return {
        ...
        table: []
    }
},
mounted() {
    this.populateTable()
},
methods: {
    checkForm(e) {
        e.preventDefault();
        if (this.fname) {
            table.push({ fname: this.fname, lname: this.lname, age: this.age })
            return true;
        }
        this.errors = [];
        if (!this.fname) this.errors.push("First name required.");
        return false;
    },
    populateTable() {
        /* GET-request, put into this.table */
    }
}

Answer 2

In the method checkForm, if anything is typed in the fname-input, it returns before e.preventDefault() is executed. To prevent form navigation, move e.preventDefault() to the beginning of the method.

Additionally, the last name input also utilizes fname as v-model.

To display data in the table, you can use the following approach:

index.html

<table style="width:100%">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    <tr v-for="(row, index) in table" :key="index">
        <td>{{row.fname}}</td>
        <td>{{row.lname}}</td>
        <td>{{row.age}}</td>
    </tr>
</table>

script.js

data: {
    return {
        ...
        table: []
    }
},
mounted() {
    this.populateTable()
},
methods: {
    checkForm(e) {
        e.preventDefault();
        if (this.fname) {
            table.push({ fname: this.fname, lname: this.lname, age: this.age })
            return true;
        }
        this.errors = [];
        if (!this.fname) this.errors.push("First name required.");
        return false;
    },
    populateTable() {
        /* GET-request, put into this.table */
    }
}

Answer 3

Answer №2

To send data to the server, utilize an ajax request instead of a form action:

In your template, ensure that the form opens like this (without specifying action and method):
```
<form class="row" @submit.prevent="checkForm">
```

Implement ajax to transmit data to the server (noting the use of vue-resource):

checkForm:function(e) {
    this.errors = [];
    if(!this.fname) this.errors.push("First name required.");
    if (this.errors.length) {
       return;
    }
    var data = {
        fname: this.fname,
        lname: this.lname,
        age: this.age
    }
    this.$http.post('http://localhost:3000/entry', data, { emulateJSON: true })
    .then(function(){
        console.log('Saved!');
     });
}

This process ensures automatic updating of data in the table.

UPDATE

Additionally, you require an array of objects to correctly render the table - which I have set up in an example using jsonplaceholder to demonstrate its functionality. Upon saving the form, the app retrieves all objects from the server. Please remember to adjust the URLs for your specific needs in order for everything to work perfectly. Also, ensure to update the output fields in the table with the correct ones - I have added comments to guide you through this process.

. . . // The rest remains unchanged as it is important content from the original text. . .

Answer 4

To send data to the server, utilize an ajax request instead of a form action:

In your template, ensure that the form opens like this (without specifying action and method):
```
<form class="row" @submit.prevent="checkForm">
```

Implement ajax to transmit data to the server (noting the use of vue-resource):

checkForm:function(e) {
    this.errors = [];
    if(!this.fname) this.errors.push("First name required.");
    if (this.errors.length) {
       return;
    }
    var data = {
        fname: this.fname,
        lname: this.lname,
        age: this.age
    }
    this.$http.post('http://localhost:3000/entry', data, { emulateJSON: true })
    .then(function(){
        console.log('Saved!');
     });
}

This process ensures automatic updating of data in the table.

UPDATE

Additionally, you require an array of objects to correctly render the table - which I have set up in an example using jsonplaceholder to demonstrate its functionality. Upon saving the form, the app retrieves all objects from the server. Please remember to adjust the URLs for your specific needs in order for everything to work perfectly. Also, ensure to update the output fields in the table with the correct ones - I have added comments to guide you through this process.

. . . // The rest remains unchanged as it is important content from the original text. . .

Insert the latest information into the table following the completion of the form in VueJS

Answer №1

Answer №2

Similar questions

How to Trigger a Javascript Function from an OnItemClick Event in ASP.NET ListView

A guide to placing tooltips dynamically in highcharts column charts

`NodeJS Compared to Static HTML`

Uploading files with Angular and NodeJS

Seeking out all of the children associated with their parent using Jquery

Create a search feature using Javascript and React that retrieves and displays results from a

Tips to avoid the page from scrolling to the top when the menu is opened

Divide a given number of elements within an array of arrays

When incorporating a background-image into my Vue.js project, I encountered this error

Working with Node.js and JavaScript's Date object to retrieve the time prior to a certain number of hours

Prevent the use of harmful language by implementing jQuery or JavaScript

What are the distinctions in how jQuery behaves when an element is assigned to a variable versus in Javascript?

Should tokens be sent via POST request or stored in a cookie?

.value not showing correct data in JavaScript

VueJS showcasing information from an API

Contrast between npm run dev and npm run production

Exploring the Concept of Adding Two Numbers Algorithm

Encountering difficulties in transferring bulky files with the request module in Node.js

Unable to retrieve scroll position utilizing 'window.scrollY' or 'window.pageYOffset'

adding a new div to the bottom of a row that is being created on the fly