时间戳

首页 > 解决方案 > Vue.js - 打开对话框以编辑记录

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

问题描述

我在每条记录的右侧都有一个带有按钮的列表，如下所示： https ://imgur.com/IVzn1ZZ

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

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

我们的 vue 应用是一个 vue-cli 应用。最近的分布。vue 为我提供了哪些选项来执行此操作？是否可以为此推荐第三方插件或类似插件？对话可能会显示大量数据。它基本上取决于允许用户查看哪些数据。所以我真的需要一些足够强大的方法来“符合人体工程学地”处理至少低两位数的输入选项：D

标签： javascriptvue.js

解决方案

对于对话，您可以使用类似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>

推荐阅读