3

So I'm trying to make a simple web application that takes data from a form and adds them to a table using VueJS. Here is the code: 

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div id="vue-app">
    <form>
        <input type="text" v-model="name"/>{{name}}<br/>
        <input type="text" v-model="last"/>{{last}}<br/>
        <input type="text" v-model="index"/>{{index}}<br/>
        <select v-model="grade">
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        {{grade}}
        <button type="submit" v-on:click="add()">Add To Table</button>
    </form>
    <table border="1">
        <thead><td>Name</td><td>Last Name</td><td>Index</td><td>Grade</td></thead>
        <tbody>
        <tr v-for="x in arr">
            <td>{{x.first}}</td>
            <td>{{x.lastn}}</td>
            <td>{{x.index}}</td>
            <td>{{x.grade}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="app.js"></script>
</body>
</html>

And here is the script:

new Vue ({
    el: '#vue-app',
    data: {
        name: '',
        last: '',
        index: 0,
        grade: 0,
        arr: []
    },

    methods: {
        add: function () {
            this.arr.push({first: this.name, lastn: this.last, index: this.index, grade: this.grade});
            console.log(1);
        }
    }
});

However whenever I click the submit button instead of adding the data to the table the page refreshes and nothing is added to the table.

Any ideas on what might be causing the problem?

David Mathers
  • 163
  • 2
  • 7
  • Well, you're actually submitting the form (to the same URL). You'll probably want to try to [prevent this default](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) behaviour. [**View a Vue example here**](https://forum.vuejs.org/t/preventing-onsubmit/2763). – JJWesterkamp Feb 04 '18 at 18:47
  • To keep the page from refreshing, you have to prevent it from submitting. Instead of calling the add() function in the submit button, remove that entire v-on event from the submit button and do this: `
    `
     – Stark Feb 04 '18 at 18:48
  • Was just writing the same thing. You could also probably simply change your button to `type="button"`... – Rob C Feb 04 '18 at 18:49

2 Answers2

8

This is because by default <button type="submit"/> in a <form> tag will try to submit form and reload the page

Check detail at How do I make an HTML button not reload the page

If you prevent the default action on the form, it works.

<form @submit.prevent="add()">

yue you
  • 2,206
  • 1
  • 12
  • 29
  • Actually, you're better off doing `@submit.prevent="submitFunc"` on the `
    `. That way you're not moving the functionality of the form away
     – Kwesi Feb 05 '18 at 14:16
0

I've had the same problem when working with forms in Vue and Nuxt. Make sure that there's no errors in the terminal window where you're running your Nuxt app. Then, empty your cache in your browser and everything should work fine.

Mikkel
  • 1,853
  • 1
  • 15
  • 31
deirdreamuel
  • 609
  • 8
  • 11