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

Repeating every other item in a list using ng-repeat in AngularJS

What is the significance of a window's "o" condition?

having difficulty altering a string in EJS

Tips for enhancing the color saturations of cells that overlap in an HTML table

What is the best way to create a fixed footer in Next.js using React?

Executing a file function from another within a module function in ReactJS

Transform JSON reply in JavaScript/Typescript/Angular

Update the DOM if the index of any data elements have been modified

Exploring innovative designs for asynchronous JavaScript programming

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

Navigating using Vue Router: Automatically redirect to the homepage if the user is trying to reload a subpage

Organizing multiple <image> tags into an array with Javascript - a beginner's guide!

Adding HTML elements dynamically using jQuery: A how-to guide

jQuery allows us to set two separate conditions for two distinct variables

Buffering ceases on the video

Creating a callback function within stored procedures using JavaScript Language Integrated Query in documentDB: A step-by-step guide

Reduce the size of a container element without using jquery

Unable to set a JSON data as a value for a JavaScript variable

Scroll up event and sticky header using jQuery

Tips for integrating a Vuetify dialog that can be easily reused