Question

所以我试图创建一个简单的Web应用程序，从表单中获取数据并使用VueJS将它们添加到表中。这是代码：

<!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>

以下是剧本：

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);
        }
    }
});

但是，无论何时单击“提交”按钮而不是将数据添加到表中，页面都会刷新，并且不会向表中添加任何内容。

关于可能导致问题的任何想法？

Answer 1

这是因为<button type="submit"/>代码中的默认<form>会尝试提交表单并重新加载页面

查看How do I make an HTML button not reload the page

上的详细信息

如果您阻止表单上的默认操作，则可以正常工作。

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

Answer 2

我在 Vue 和 Nuxt 中使用表单时遇到了同样的问题。确保运行 Nuxt 应用程序的终端窗口中没有错误。然后，清空浏览器中的缓存，一切正常。

Page使用VueJS保持清爽

2 个答案: