我目前正在为我的项目使用vuejs。我需要的是，当我单击表中的一行时，模态将根据被单击的行中的数据显示并填写表格。但是，我的代码无法正常工作。请在下面查看我的代码。
var app = new Vue({
el: '#roleContainer',
data: {
roles: [
{ display_name: 'user', description: 'user', created_at: '2020/02/20' },
{ display_name: 'mod', description: 'mod', created_at: '2020/02/21' }
],
id: '',
display_name: '',
description: ''
},
methods: {
openEditModal(role){
$('#formModal').modal('show');
console.log(role);
}
}
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="roleContainer">
<table class="table table-striped with-border">
<thead>
<tr>
<th>Display Name</th>
<th>Description</th>
<th>Created at</th>
</tr>
</thead>
<tbody>
<tr v-for="role in roles" @click="openEditModal" class="pointer">
<td v-text="role.display_name"></td>
<td v-text="role.description"></td>
<td v-text="role.created_at"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="formModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Create Role</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label">Display Name</label>
<input type="text" name="display_name" v-model="display_name" class="form-control" required>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<input type="text" name="description" v-model="description" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" @click="createNewRole">Save</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><tr v-for="role in roles" @click="openEditModal" class="pointer">
<td v-text="role.display_name"></td>
<td v-text="role.description"></td>
<td v-text="role.created_at"></td>
</tr>
在这里，您应该传递参数role。例如，
@click="openEditModal(role)"
然后在openEditModal函数中
this.display_name = role.display_name;
this.description = role.description;
希望对您有帮助
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句