Vuex object composition: distributing events to child component properties

While I have been able to successfully pass down the state object as a prop and change arrays to overwrite the whole object on property change, I'm facing difficulties when it comes to changing property literals.

The documentation implies that I should be able to modify arrays/objects, but for some reason I can't simply do something like object.prop = "string". It's puzzling why I can update arrays in the state object which is supposed to be immutable. There are some workarounds for modifying literal props, but they often lead to inconsistencies with the original prop. I am open to exploring more efficient solutions for creating forms to alter state object properties.

<div id="skillListing" class="ui item" @change="resetSkill">
  <input :value="filter.name" placeholder="edit me">

  props: [
    "filter",
    "fIndex",
    "gIndex"
  ],
  methods: {
    resetSkill () {
      console.log(this.filter.name) // this won't change
       this.$store.commit('upsert_skill', {o: this.filter, f: this.fIndex, g: this.gIndex})
    }
  }

Answer №1

Based on my understanding of your query, if your component consists solely of an input field, you have the option to utilize v-model for passing props.

v-model serves as a shorthand for updating data during user input events.

<input v-model="something">

This code is basically equivalent to:

<input v-bind:value="something" v-on:input="something = $event.target.value">

You can pass a prop : value within the child components and upon changing the input field, trigger the following function which will update the filter.name variable.

this.$emit('input', newVal)

To implement your component, do the following:

<your-component v-model="filter.name"></your-component>

If you want an example of implementation using this method, check out this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If you have no need to directly interact with the object instance, you have the option to encapsulate it within a `reactive` container

As per the information provided in the documentation: For situations where accessing the actual object instance is not necessary, you can encapsulate it within a reactive: nested: reactive({ count, }) I am struggling to grasp this concept, could someo ...

The key property is present on the list item, yet the key warning persists

I have encountered various issues with this problem, but I am unable to pinpoint the exact cause. I am not extracting individual list items and simply displaying a UL with unique keys assigned to each item. However, when I log the results, I see something ...

Consistently encountering the error message "(0 , _reactDom.h) is not a function" or "h is not defined"

I'm currently in the process of developing an app that makes use of electron, react, redux, and several other technologies. At the moment, I have included electron, react, electron-compile, and babel in the project. Redux is installed but has not been ...

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

I've been trying to center a div element with the mouse cursor, following its movement. However, the current code I have offsets the positioned div from the cursor instead of aligning it perfectly. PROCESS The concept behind my code is to display an ...

Angular 2 fails to redirect to a 404 page if both the route parameter and address are not valid

Currently, while working on my application with Angular 4.1.1, I have a habit of declaring routing in every module I create. For instance, in the file new-cars.routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, ...

selector must begin with attribute in order to only target the first input field and not any others

Having trouble with the attribute starts with selector for validation of fields with dynamic IDs. Tried multiple approaches but haven't been successful. Here's what I've attempted so far: I have looked at other suggestions on Stack Overflo ...

Looking for a way to deactivate the loader after the submission is complete

Seeking to implement a loader on my asp.net webforms app. Here's my javascript loader: function loading() { $("#loading").show(); } function loaded() { $("#loading").hide(); } html loader ...

How can I create a consistent copy button function for an HTML table that works the same across different browsers like Firefox and Chrome?

I am encountering an issue where copying the second row of an HTML table to paste it in an Excel file works perfectly in Firefox, but not in Chrome. When pasting in Chrome, the cells do not match and only the HTML inside the table cells is retained. I am u ...

How come I am unable to pass JavaScript values to my PHP5 code?

I'm struggling with this code snippet: <?php $html=file_get_contents('testmaker_html.html'); echo $html; ?> <script type="text/javascript"> document.getElementById('save_finaly_TEST').addEventLis ...

The management of jQuery events through .on and .off functions, maintaining the correct order, and ensuring their

Check out this jsFiddle example: http://jsfiddle.net/fThMa/2/ By clicking inside the note or rend text fields and then double clicking any of the 4 TDs below, you can insert the appropriate HTML entities into the note or rend text fields. This also includ ...

Discovering the source DOM element that initiated ng-change

I am currently working with angularJS and have multiple <select> elements on my webpage, each with its own ng-change function. Here is an example: <select id="hairColorComponent" ng-model="hairColor" ng-options="option.name for option in ...

Transform Local Date to a Date Instance

Can someone guide me on how to convert a locale date to a date object in the correct way? Take a look at the following code snippet: > new Date() 2021-08-25T15:37:51.425Z // UTC Date > new Date().toLocaleString() '8/25/2021, 6:37:51 PM&apos ...

Using Vuejs to retrieve the ID of a clicked image

Within a loop, I am displaying images retrieved from the database. Each image has a unique ID that I need to capture when clicked. <div v-for="kudo in catkudo" style="width:20%;float:left;display:block;height:80px;"> <div class="kudos_img" sty ...

What is the method for navigating a nested dictionary?

Trying to access data from two dictionaries using JavaScript and having some trouble. The JSON output received from the server is as follows: {"meta":{},"linked":{"custom_fields":[{"id":"4","name":"Department"}],"custom_field_values":[{"id":"0001","value ...

Having trouble disabling an HTML select menu using JQuery?

My HTML page includes multiple select menus that all have the shared class name .iconDropDownMenu. During generation with PHP, some of these select menus may be hidden by PHP adding an additional class. I attempted to disable only the hidden .iconDropDown ...

REACT: Implement a feature to add a distinctive border around the currently selected image

When selecting a picture, I would like to have a border around it. Specifically, if out of 6 pictures I choose 3, I want highlighted borders around those selected images. How can this be achieved? EDIT: I am utilizing React to address this issue. ...

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried: <section> <button type=&quo ...

transferring JSON information to a template in a NodeJs application

Currently, I am performing some filtering on my JSON data and storing the result in a variable called driver. The driver variable contains JSON data that I want to pass unchanged to the view. My main query is: How can I effectively send the data stored i ...

What is the best way to set a default value for a password form input field?

I'm currently working on creating a form with input fields similar to those found on Twitter. I want to set default values for the input fields, which I have successfully done. However, when it comes to the password field, the default value is present ...

Unable to execute app.get in Express framework of Node.js

const express = require('express'); let router = express.Router(); router.get('/create-new', (req, res, next) => { res.send('<form action="/submit-data" method="POST"><input type="text" name="name"><button ...