Vue.js - Launching Modal for Editing Data Entry

Question

Vue.js - Launching Modal for Editing Data Entry

I have a list of records with corresponding buttons on the right side, as shown in this image: https://i.sstatic.net/uevzR.jpg

Whenever I click on one of these buttons, I want a dialog box to appear containing various input fields such as text inputs, dropdowns, and checkboxes. This dialog will allow me to edit only that specific record. Each input field should be labeled according to the column header it corresponds to in the table, so the user knows exactly which field they are editing.

As a novice in vue.js, I am unfamiliar with creating dialogues using this framework. While dialogues may not be the standard practice in web applications, my team has decided to implement them for certain reasons, and I must work within this design choice.

Our vue app is based on vue-cli, using the most recent version. What options does Vue provide for implementing this feature? Would third-party plugins be recommended to enhance functionality? The dialog may potentially contain a large amount of data depending on the user's permissions, so I need a robust solution capable of handling multiple input options effectively.

javascript vue.js

Answer 1

Answer №1

To implement the dialogue functionality, consider utilizing something like bootstrap-vue's modal component.

You have the flexibility to include any necessary form HTML within the modal component.

If each record in your set follows the same schema, you could establish a data property such as selectedRecord and bind the inputs in your form to the properties of selectedRecord. Subsequently, when a record button is clicked, it will populate selectedRecord with the corresponding record and display the modal window.

For instance:

<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() {
      //Code for dynamically setting permissions
      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 send to backend, update original record, hide modal, etc.
        this.$refs.selectedRecordModal.hide();
      }
    }
  }
</script>

Answer 2

To implement the dialogue functionality, consider utilizing something like bootstrap-vue's modal component.

You have the flexibility to include any necessary form HTML within the modal component.

If each record in your set follows the same schema, you could establish a data property such as selectedRecord and bind the inputs in your form to the properties of selectedRecord. Subsequently, when a record button is clicked, it will populate selectedRecord with the corresponding record and display the modal window.

For instance:

<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() {
      //Code for dynamically setting permissions
      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 send to backend, update original record, hide modal, etc.
        this.$refs.selectedRecordModal.hide();
      }
    }
  }
</script>

Vue.js - Launching Modal for Editing Data Entry

Answer №1

Similar questions

Vue is capable of both catching and managing emitted events originating from elements housed within slots

Performing an RxJS loop to retrieve the httpGet response, followed by executing httpPut and httpPost requests based

Having trouble with the API authentication call, receiving a "Failed to load resource: net::ERR_CONNECTION_REFUSED" error message

Issue with AngularJs failing to display data

When JavaScript evaluates special characters in HTML, it interrupts the function call within an AJAX response

Refreshing the settimeout function through a click event

Locate an item based on the `Contains` criterion by utilizing Express and Mongoose

Setting a class for a specific date on a jQuery UI calendar using the MultipleDates plugin

Is there a way to navigate to a newly created document?

Sort an array of objects by matching string properties with elements from another array

Unable to display content within a map function

JavaScript attaching a function to an element within an array

Discovering the PHP error message that is sent to AJAX through JQuery

When attempting to compile at runtime without an instance, the act of creating a function constructor can lead to an

Exploring TypeScript and React Hooks for managing state and handling events

Implementing the decrement functionality within an onclick event handler for a variable

Jquery code not responding to ajax callback

Inconsistency in @nuxtjs/i18n locales after refreshing the page

Refining information and displaying it alongside the "indelible" data - react

Can I use unclosed tags with v-for for iteration in Vue.js?