vue中form标签遇到的疑问，求教前辈解答！！！
新人开始学习VUE，仿照网上的例子实现了一个表单生成和删除的实例，实际过程遇到了一个问题，在html标签代码内我自己额外加了form标签就会无法正常运行，去掉后就可以，网上的例子是没加的。
表单相关元素不是都应该放到from标签内吗？加了form标签反而出错了！！！
运行时去掉from标签就会正常
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>
<body>
<div id="frome_table">
<form>
<fieldset>
<legend>vue 实例</legend>
<div>
<label>name：</label>
<input type="text" v-model='new_person.name'>
</div>
<div>
<label>age：</label>
<input type="text" v-model='new_person.age'>
</div>
<label>sex：</label>
<select v-model='new_person.sex'>
<option>1111111</option>
<option>2222222</option>
</select>
<button v-on:click='create_person'>test</button>
</fieldset>
</form>
<table>
<thead>
<tr>
<th>11</th>
<th>11</th>
<th>11</th>
</tr>
</thead>
<tbody>
<tr v-for='person in item'>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td>
<button>del</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: '#frome_table',
data: {
new_person: {
name: '', age: '', sex: ''
},
item: [{
name: 'Jack',
age: 30,
sex: 'Male'
},
{
name: 'Jack',
age: 30,
sex: 'Male'
}]
},
methods: {
create_person: function () {
//alert(1)
this.item.push(this.new_person)
this.new_person = { name: '999', age: '999', sex: '999' }
}
}
})
</script>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你也没说具体现象，那我只能猜了。button的默认类型是submit，点击之后走了form的默认提交。可以改成
type="button"试试。