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

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

Error in jQuery: the variable has not been defined

Every other attempt at an Ajax request seems to be successful

Looking for guidance on implementing explicit waits in Protractor for non-angular applications

Modify picture properties when listbox is altered using jQuery

renewing a div element without the need to reload the entire webpage

How to dynamically load a component within a class-based Vue component

The Next.js application is functioning smoothly in development, but encounters errors during the building and deployment processes

Convenient Method for Making POST Requests with the Node Request Module and Callback

Exploring the process of web scraping from dynamic websites using C#

What is the best way to handle asynchronous requests in frontend development with Nuxt.js?

Tips for preventing issues with Javascript latency causing flash out during page loading in Chrome

Having difficulty processing information retrieved from an ajax request in jQuery

Leveraging database functionality through sequelize

Utilizing v-model for dynamic binding within a v-for iteration

Enhance your Rails 5 application with a dynamic live search feature powered by Keyup. Say goodbye to

Apply a dynamic function to assign a background color to a specific class

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

How to stop a checkbox from being selected in Angular 2

Guide to resetting a CSS animation with pure JavaScript

"Invalid operation" error encountered within a Flask function in Python