页面使用 VueJS 不断刷新
[英]Page keeps refreshing with VueJS
问题描述
所以我正在尝试制作一个简单的 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);
}
}
});
但是，每当我单击提交按钮而不是将数据添加到表中时，页面都会刷新，并且没有向表中添加任何内容。
关于可能导致问题的任何想法？
2 个解决方案
解决方案1
6 已采纳 2018-02-04 18:52:09
这是因为默认情况下<button type="submit"/> <form>标签中的<button type="submit"/>将尝试提交表单并重新加载页面
如果您阻止表单上的默认操作，它就会起作用。
<form @submit.prevent="add()">
解决方案2
-1 2021-02-23 19:19:20
在 Vue 和 Nuxt 中使用表单时，我遇到了同样的问题。 确保运行 Nuxt 应用程序的终端窗口中没有错误。 然后，清空浏览器中的缓存，一切正常。
JSP页面不断刷新
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.