Vue.js-打开对话框编辑记录

Question

我有一个列表，每个记录的右边都有按钮，看起来是这样的：https://i.stack.imgur.com/uevzR.jpg

当我点击其中一个按钮时，我希望弹出一个对话框，其中有文本输入、下拉列表、复选框等输入字段。这个对话框将允许编辑相应的记录(仅此记录(。输入字段应相应标记，基本上每个输入字段都应接收一个从输入字段引用的相应列标题(见表标题(派生的标签。这样，用户应该知道他对记录的哪个字段进行了更改。

我是vue.js的初学者。我以前从未在vue.js中使用过对话。我知道对话在网络应用程序中并不被认为是最佳实践，但这是我们团队出于几个原因做出的设计决定，现在我必须坚持下去。

我们的vue应用程序是vue-cli应用程序。最新发布。vue为我提供了什么选择？是否推荐第三方插件或类似插件？对话可能会显示大量数据。它基本上取决于用户可以看到什么数据。因此，我真的需要一些强大的方法来"符合人体工程学"地处理至少两位数的输入选项：D

Answer 1

对于对话，您可以使用类似bootstrap-vue的模态组件。

您可以在模态组件中放入所需的任何形式的HTML。

假设集合中的每个记录都有相同的模式，那么您可以有一个数据属性，例如selectedRecord，并将表单中的输入绑定到selectedRecord的属性，然后当单击某个记录按钮时，它应该用单击的记录填充selectedRecord并显示模态。

例如

<template>
<div>
<ul>
<li v-for="record in records"
:key="record.id">
<span>{{record.name}}</span>
<button class="btn btn-primary"
@click="startEditing(record)">Edit
</button>
</li>
</ul>
<b-modal
ref="selectedRecordModal"
id="modal-1"
title="BootstrapVue"
@ok="save()"
>
<form v-if="selectedRecord">
<div class="form-group" v-if="editable('name')">
<label for="name">Name</label>
<input type="text"
id="name"
name="name"
v-model="selectedRecord.name"
class="form-control">
</div>
<div class="form-group" v-if="editable('extra')">
<label for="extra">Extra</label>
<input type="text"
id="extra"
name="extra"
v-model="selectedRecord.extra"
class="form-control">
</div>
</form>
</b-modal>
</div>
</template>
<script>
import Vue from 'vue';
import { BModal } from 'bootstrap-vue'
export default {
components: {
BModal
},
data() {
return {
records: [
{ id: 1, name: 'record 1' },
{ id: 2, name: 'record 2' },
{ id: 3, name: 'record 3', extra: 'thing'},
],
selectedRecord: null,
user: {
permissions: null
}
}
},
created() {
//Replace with code for setting permissions dynamically
this.user.permissions = {name: true, extra: true};
},
methods: {
editable(field) {
return (this.selectedRecord[field] && this.hasEditPermission(field));
},
hasEditPermission(field) {
return !!this.user.permissions[field];
},
startEditing(record) {
this.selectedRecord = Vue.util.extend({}, record);
this.$refs.selectedRecordModal.show();
},
save() {
//Validate this.selectedRecord and post to backend, update the original record, hide the modal etc.
this.$refs.selectedRecordModal.hide();
}
}
}
</script>