Managing multiple properties linked to a main component array in VueJS

Question

Managing multiple properties linked to a main component array in VueJS

I am facing a challenge with a list of components that I would like to make editable and replicate the state to the parent component.

The list component is defined as:

Vue.component("shortcuts", {
  props: {
    shortcuts: Array
  },
  template: '...<shortcut-entry v-for="(shortcut, index) in shortcuts" :key="index" :shortcut="shortcut" @remove="remove(index)"></shortcut-entry>...'
})

It is used with a model like this:

<shortcuts :shortcuts.sync="shortcuts"></shortcuts>

Now each shortcut-entry component will contain multiple values that I want to pass back to the main list of objects:

    Vue.component("shortcut-entry", {
      props: {
        mod_ctrl: Boolean,
        mod_alt: Boolean,
        mod_shift: Boolean,
        keypress: String,
        action: String,
        ...
      },

Each of these properties has its own checkbox or input field on the page, for example: <input ... v-model="action">. While I can manually handle updating the parent component for each change, it seems like a lot of repetitive code.

Is there a way to automatically propagate any changes made to these props back to the parent component? (while avoiding the "Avoid mutating a prop directly" warning)

So far, moving all props into another level and binding them with .sync seems to work, but I am exploring a more explicit solution that declares these options upfront.

javascript vue.js

Answer 1

Answer №1

If you want to utilize the sync modifier alongside props object notation, consider using v-bind.sync="shortcut" instead of v-bind="shortcut".

This approach allows the shortcut component to define all props (rather than just the options object) while still being able to notify the parent about changes.

To implement this, adjust how you bind your inputs. Instead of

<input ... v-model="action">

, use

<input ... v-bind:value="action" v-on:input="$emit('update:action', $event.target.value)">

. However, different <input> types may have varying names for the value and change event, as outlined in Vue documentation.

If you prefer to continue using v-model, you can create a computed property for each prop and utilize

v-model="actionComputed"

:

computed: {
  actionComputed: {
    get: function() { return this.action },
    set: function(value) { this.$emit('update:action', value) }
  }
}

However, this method results in additional boilerplate code.

In summary, if you wish to predefine all props (instead of a single prop of type object), some level of boilerplate is unavoidable. While it is possible to reduce this by dynamically generating computed props for v-model similar to how Vuex helpers work, the effort may not be worth it. It might be simpler to pass an object and allow the <input> components to handle property mutations...

Answer 2

If you want to utilize the sync modifier alongside props object notation, consider using v-bind.sync="shortcut" instead of v-bind="shortcut".

This approach allows the shortcut component to define all props (rather than just the options object) while still being able to notify the parent about changes.

To implement this, adjust how you bind your inputs. Instead of

<input ... v-model="action">

, use

<input ... v-bind:value="action" v-on:input="$emit('update:action', $event.target.value)">

. However, different <input> types may have varying names for the value and change event, as outlined in Vue documentation.

If you prefer to continue using v-model, you can create a computed property for each prop and utilize

v-model="actionComputed"

:

computed: {
  actionComputed: {
    get: function() { return this.action },
    set: function(value) { this.$emit('update:action', value) }
  }
}

However, this method results in additional boilerplate code.

In summary, if you wish to predefine all props (instead of a single prop of type object), some level of boilerplate is unavoidable. While it is possible to reduce this by dynamically generating computed props for v-model similar to how Vuex helpers work, the effort may not be worth it. It might be simpler to pass an object and allow the <input> components to handle property mutations...

Managing multiple properties linked to a main component array in VueJS

Answer №1

Similar questions

Creating pagination in Vue using an array of objects

Guide to extracting a key from the route module with the help of vuex-router-sync

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

jQuery: Locate and eliminate any images in the text that appear after a specific group of tags if no images are present

Manipulating CSS Class Properties Using JavaScript

How to Send a JavaScript Array to a JSP Endpoint

Tips on implementing a function within a navigation bar from a specific context

We regret to inform you that the request cannot be processed by our Express

Utilize regular expressions in TamperMonkey to extract specific groups of text

How can we add up the sum with just one click and then display the

reversed json using javascript

What is the correct way to use variables to reference whether an item is odd or even in an ng-repeat loop?

The images on the carousel fail to load unless I adjust the window size

Executing Ajax requests to interact with a RESTful API

Invoking PHP function within a specific class using Ajax

Exploring file writing using Node Webkit and JavaScript

Can a dynamic title be implemented in a navbar?

Creating the x and y coordinates for drawImage in HTML5

Are asynchronous promises thenable for chaining?

Tips for eliminating flutter for static menu with easyResponsiveTabs.js