Javascript 如何使用v-for vuejs指令获取元素id？
我是vue.js初学者，所以需要帮助。 我编写了一个HTML页面，在一个简单的表中显示对象列表。 该表由一个脚本生成，该脚本从servlet获取一个JSON对象，并使用v-for指令显示它。 在表的每一行中，都有一个按钮，用户可以单击该按钮以使用表单预订写入相应行中的对象。 问题是，我不知道如何获取与单击的行对应的对象信息，以便将其放入表单的字段中 代码如下：Javascript 如何使用v-for vuejs指令获取元素id？,javascript,html,vue.js,Javascript,Html,Vue.js,我是vue.js初学者，所以需要帮助。 我编写了一个HTML页面，在一个简单的表中显示对象列表。 该表由一个脚本生成，该脚本从servlet获取一个JSON对象，并使用v-for指令显示它。 在表的每一行中，都有一个按钮，用户可以单击该按钮以使用表单预订写入相应行中的对象。 问题是，我不知道如何获取与单击的行对应的对象信息，以便将其放入表单的字段中 代码如下： <!DOCTYPE html> <html lang="en"> <head&
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repetition - catalog</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<header><h1>REPETITIONS.com</h1></header>
<div id="app" class="float-container" style="height: 80%">
<table class="catalog-table">
<thead>
<tr>
<th style="width: 200px">Corso</th>
<th style="width: 250px">Docente</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="rep in reps">
<td>{{rep.teacherName}} {{rep.teacherSurName}}</td>
<td>{{rep.course}}</td>
<td>
<form action="/Repetition/controller/ServletController" method="post" id="i">
<input type="hidden" name="operation" value="booking">
<input type="hidden" name="id_t" value="rep.getId_teac"> <---set the value of the current row
<input type="hidden" name="id_c" value="rep.getId_cor"> <---set the value of the current row
<button type="submit">Book</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<footer>xxxxxxx</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var app = new Vue ({
el: '#app',
data: {
repetitions: [],
link: '/Repetition/ServletController?operation=catalog&device=x'
},
mounted(){
this.getRepetitions()
},
methods:{
getRepetitions: function(){
var self = this;
$.get(this.link, function(data) {
self.repetitions = data;
});
}
}
});
</script>
</body>
</html>
重复目录
REPETITIONS.com
科索
医生
{{rep.teacherName}}{{rep.teacherName}}
{{rep.course}
您应该添加有关“代表”中数据的结构的信息。它是嵌套的（rep.course.id
），扁平的（rep.courseId
），还是您有其他方法来获取您想要的id（无论getId\u teac
应该做什么）？也许它和使用v-bind:value
而不是value
一样简单，但我不能确定。是的，很抱歉，它就像rep.courseId
一样简单。您应该添加有关“rep”中数据结构的信息。它是嵌套的（rep.course.id
），扁平的（rep.courseId
），还是您有其他方法来获取您想要的id（无论getId\u teac
应该做什么）？也许它和使用v-bind:value
而不是value
一样简单，但我不能确定。是的，很抱歉，它像rep.courseId