Building a dynamic attribute management system with vue and vuetify

Question

Building a dynamic attribute management system with vue and vuetify

In the backend business object, there is a custom attributes data structure that allows clients to add key/value pairs for storing in the database. For instance:

Map<String, String> customAttributes;

Here's an example of how it would look in the user interface (with the option to add more rows): https://i.sstatic.net/G5pfD.png

Inside the vue's data function, I have set a placeholder for this data:

data() {
    return {
      customAttributes: {},
      ...
    }

However, I am struggling to find a way to connect the UI inputs to the customAttributes object so that adding a new row (attribute) automatically adds a corresponding key and value to it.

Is there a different approach I could take to handle this situation?

javascript vue.js vuetify.js

Answer 1

Answer №1

Using a Map may not be the best choice in Vue, as object keys that can easily be modified can cause tracking issues. It would be more suitable to utilize something like

Array<{ key: string, value: string }>

If you really require the map version, it can still be derived from the array quite easily.

const model = { key: "", value: "" }

new Vue({
  el: "#app",
  data: () => ({
    attributes: [{
      key: "GRADLE_HOME",
      value: "/usr/local/gradle"
    }, {
      key: "JAVA_HOME",
      value: "/usr/lib/jvm/whatever"
    }]
  }),
  computed: {
    attributeMap: ({ attributes }) =>
      Object.fromEntries(attributes.map(({ key, value }) => [ key, value ]))
  },
  methods: {
    add () {
      this.attributes.push({...model})
    },
    del (index) {
      this.attributes.splice(index, 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <table border="1">
    <thead><tr><th>Name</th><th>Value</th></tr></thead>
    <tbody>
      <tr v-for="(attr, index) in attributes" :key="index">
        <td><input v-model="attr.key"/></td>
        <td>
          <input v-model="attr.value" />
          <button @click="del(index)">&times;</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr><td colspan="2"><button @click="add">Add Attribute</button></td></tr>
    </tfoot>
  </table>
  <pre>attributeMap = {{ attributeMap }}</pre>
</div>

Answer 2

Using a Map may not be the best choice in Vue, as object keys that can easily be modified can cause tracking issues. It would be more suitable to utilize something like

Array<{ key: string, value: string }>

If you really require the map version, it can still be derived from the array quite easily.

const model = { key: "", value: "" }

new Vue({
  el: "#app",
  data: () => ({
    attributes: [{
      key: "GRADLE_HOME",
      value: "/usr/local/gradle"
    }, {
      key: "JAVA_HOME",
      value: "/usr/lib/jvm/whatever"
    }]
  }),
  computed: {
    attributeMap: ({ attributes }) =>
      Object.fromEntries(attributes.map(({ key, value }) => [ key, value ]))
  },
  methods: {
    add () {
      this.attributes.push({...model})
    },
    del (index) {
      this.attributes.splice(index, 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <table border="1">
    <thead><tr><th>Name</th><th>Value</th></tr></thead>
    <tbody>
      <tr v-for="(attr, index) in attributes" :key="index">
        <td><input v-model="attr.key"/></td>
        <td>
          <input v-model="attr.value" />
          <button @click="del(index)">&times;</button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr><td colspan="2"><button @click="add">Add Attribute</button></td></tr>
    </tfoot>
  </table>
  <pre>attributeMap = {{ attributeMap }}</pre>
</div>

Building a dynamic attribute management system with vue and vuetify

Answer №1

Similar questions

What are the steps to manually activate input validation in Angular 2?

What is the best method for testing different versions of the same module simultaneously?

How to Filter, Sort, and Display Distinct Records in an HTML Table with jQuery, JavaScript, and

Vue filter and the importance of not modifying the vuex store state without using mutation handlers

Issue with specific route causing server to throw 500 error

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

Add a variety of parameters to the URL in order to make an AJAX request

Some PDF files appear as blank when shown using a Base64 encoded string

Developing a custom function to retrieve an array as a callback

What is the technique for causing this element to move in reverse?

Getting query parameter with hyphen in nextJS 13 - step by step tutorial

AngularJS encounters bad configuration on 'GET' request

Prevent dropzone from refreshing the page

What steps should be taken to create a two-column table from a given list of items?

Tips for showcasing information from firebase using the vis.js timeline widget

Using HTML to execute a JavaScript function that transforms images

What are the steps to implement character movement in a 2D game using JavaScript?

When the user clicks, I plan to switch the audio source

Bootstrap Table Vue Selection

What is the best way to toggle the color of the circle div in the center between yellow and white with every click within the circle?