vue修改数据库数据实现文本框、下拉框数据回显

本文链接：https://blog.youkuaiyun.com/javaxbc/article/details/102669768

本文介绍如何在Vue项目中实现从数据库获取数据并显示在文本框和下拉框，以便进行数据回显。在查找问题时发现错误源是一个多余的分号。文章提供了两种修改页面方案，一种通过Controller获取数据，另一种使用JS直接在修改页面获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我写vue的时候，跟同学的代码基本一样，他的可以，我的就不可以。找了半天，一直没找到。最后让老师看了下，是在写行内样式的时候多了一个分号。所以说，这个东西如果报错，还不知道哪里错，就把那些花里胡哨的先都删了，在慢慢找。

本页面仅有数据回显功能！！！，修改后提交没有写

查询页

在这里插入图片描述
首页查询到信息后，点击修改，会跳转到相应的修改。这里是根据id进行判断的。（实体中id我保存的String型，在数据库中是int型）

首页

vue代码

<script>
		var vm = new Vue({
   
			el: '#app',//这里是调用id，我把id="app"写在table标签里了
			data:{
   
				sites:[]
			},
			methods:{
   
				edit:function(id,key){
   //通过点击修改按钮触发事件，这里的key好像没什么用，我复制的代码，有些地方可能没删干净，不敢乱删了
					window.location.href="/work/VueEdit?id="+id;
				}
			}
	});
</script>

首页html代码，这里就只给修改按钮的标签了

<td>
	<a v-on:click="edit(site.id)"><!-- 这里的id是数据库字段里面的id，然后上传给Controller的edit，edit只有调用修改页面的作用，没有查询功能。不知道怎么获取可以参考上上篇文章，里面补充了 -->
		<input type="button" value="修改">
	</a>
</td>

修改页面方案①

修改页面首先是获取信息，在这呢，我的信息分为了两个表，一个是主要的信息表，另一个是班级表。所以获取的时候就要获取两次，当然应该也可以用表连接，获取一次就够了。

html代码

<table  border="1" width="600px" cellspacing="0" cellpadding="5px" align="center" 
 id="app">
<tr>
<td>
<!-- 隐藏域，保存id信息 -->
<input type="hidden" id="eid"  name="id" th:value="${id}"><!-- 这里的id是通过Controller中获取的，并不是主页传来的id -->
<!-- 添加唯一性判断 -->
手机号：<input type="text" id="tell" name="tell" v-model="sites.tell"><span id="text"></span><br /><br />
姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type=