Javascript Vue.js-打开用于编辑记录的对话框

我有一个列表，每个记录的右侧都有按钮，如下所示：

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

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

我们的vue应用程序是vue cli应用程序。最近的发行。vue为我提供了哪些选项？是否建议使用第三方插件或类似插件？

---

对话可能会显示大量数据。这基本上取决于允许用户查看哪些数据。因此，我真的需要一种足够强大的方法，能够“符合人体工程学”地处理至少两位数的输入选项：D

对于对话，您可以使用类似这样的方法

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

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

e、 g

{{record.name}
编辑


名称
额外的
从“Vue”导入Vue；
从“引导vue”导入{BModal}
导出默认值{
组成部分：{
B模式
},
数据（）{
返回{
记录：[
{id:1，名称：'record 1'}，
{id:2，名称：'record 2'}，
{id:3，name:'record 3'，extra:'thing'}，
],
selectedRecord:null，
用户：{
权限：null
}
}
},
创建（）{
//替换为动态设置权限的代码
this.user.permissions={name:true，extra:true}；
},
方法：{
可编辑（字段）{
return（this.selectedRecord[field]&&this.hasEditPermission（field））；
},
hasEditPermission（字段）{
return！！this.user.permissions[字段]；
},
开始编辑（记录）{
this.selectedRecord=Vue.util.extend（{}，record）；
这是.$refs.selectedRecordModal.show（）；
},
保存（）{
//验证此项。选择记录并发布到后端，更新原始记录，隐藏模式等。
这是.$refs.selectedRecordModal.hide（）；
}
}
}

对于对话，您可以使用以下内容

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

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

e、 g

{{record.name}
编辑


名称
额外的
从“Vue”导入Vue；
从“引导vue”导入{BModal}
导出默认值{
组成部分：{
B模式
},
数据（）{
返回{
记录：[
{id:1，名称：'record 1'}，
{id:2，名称：'record 2'}，
{id:3，name:'record 3'，extra:'thing'}，
],
selectedRecord:null，
用户：{
权限：null
}
}
},
创建（）{
//替换为动态设置权限的代码
this.user.permissions={name:true，extra:true}；
},
方法：{
可编辑（字段）{
return（this.selectedRecord[field]&&this.hasEditPermission（field））；
},
hasEditPermission（字段）{
return！！this.user.permissions[字段]；
},
开始编辑（记录）{
this.selectedRecord=Vue.util.extend（{}，record）；
这是.$refs.selectedRecordModal.show（）；
},
保存（）{
//验证此项。选择记录并发布到后端，更新原始记录，隐藏模式等。
这是.$refs.selectedRecordModal.hide（）；
}
}
}

非常感谢！但是，尽管给定用户的每个记录看起来都相同，但每个用户的记录看起来却不同。从后端获取的数据在大小和属性组合上可能有所不同，尽管基本结构看起来总是一样的。我仍然需要根据用户可见的数据动态构建modals输入字段的代码。顺便问一下，id真的必要吗？我摆弄着bootstrap vue中的演示模式，发生了一件非常有趣的事情：我在页面顶部“静态”放置了一个这样的元素，并且在v-for循环中动态生成了它们。他们总是有“modal-1”id，而且它起作用了。我可以在单击按钮时启动对话框。然而，当我删除所有ID时，一切都不起作用了。有趣的是：只要我留下至少一个这样的元素和它的id，其他被剥夺的元素也会起作用。我接受了你的答案，因为它真的帮助了我前进！我在评论中概述的问题仍然存在

<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>