What is the reason for Vue not updating the component after the Pinia state is modified (when deleting an object from an Array)?

When using my deleteHandler function in pinia, I noticed an issue where the users array was not being re-rendered even though the state changed in vue devtools. Interestingly, if I modify values within the array instead of deleting an object from it, Vue recognizes the change and successfully re-renders the component. Simply deleting the object does not trigger the re-render.

const deleteHandler = (user) => {
  //deleting an object doesn't render
    useUser.users = useUser.users.filter(usr => usr.id !== user.id) 
  //modifying values works and triggers a re-render
  useUser.users.forEach(usr => {
    usr.points += 1
  })
}

Answer ā„–1

Ensure that you retrieve data from the store by using the storeToRefs() method of Pinia. This method will only function properly if you are exclusively accessing state from the store and not executing any actions.

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
// `name` and `doubleCount` become reactive refs
// It also extracts refs for properties introduced by plugins
// while ignoring actions or non-reactive properties
const { name, doubleCount } = storeToRefs(store)
// the increment action can be easily accessed
const { increment } = store

Answer ā„–2

It appears to be a reference problem that needs addressing. Give this solution a shot:

useUser.users = [...useUser.users.filter(usr => usr.id !== user.id)];

Instead of:

useUser.users = useUser.users.filter(usr => usr.id !== user.id) 

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

What is the process of implementing session storage in an AngularJS directive?

I am trying to save values in Angular session storage within an Angular directive, but I am facing an issue where I only receive NULL. Can anyone provide assistance? app.directive('myDirective', function (httpPostFactory) { return { restrict ...

Rails database is not properly embedding into Javascript when using as_json.to_json method. (results in "&quot" characters)

I have scoured nearly every SO past question without success. Within my main.html.erb file, I am mixing html/erb/javascript. (I understand it's not ideal, but I'm still grappling with asset pipelines and this is just a small project.) My goal i ...

On mobile devices, the code "location.assign(url)" may occasionally redirect to an incorrect URL, despite functioning correctly in the majority of instances

After setting up a page with a timeout that should automatically redirect to a specific URL after 60 minutes, I encountered an issue where the redirection sometimes leads to a loss of parameters in the URL. The JavaScript code added for this purpose is set ...

What steps are involved in verifying the data stored in the database?

I need help setting up authorization in PHP. Although I'm not very familiar with it, I have been tasked with implementing this feature. I want the authorization process to occur when a user clicks on a button and then redirect them to another page. I ...

What is the antonym of 'appear' when it comes to Vue transitions?

Iā€™m currently working on a modal component that utilizes the 'v-if' attribute to determine its visibility. In the Vue documentation, it mentions using 'appear' for transitions (https://vuejs.org/guide/built-ins/transition.html#transi ...

Issue with Framer Motion Modal: Animation presence fails to function

Currently, I am facing an issue with the exit animation of a modal created using framer motion. While the initial animation on opening the modal works perfectly fine, the exit animation fails to trigger and the modal disappears abruptly without any transit ...

Making sure to consistently utilize the service API each time the form control is reset within Angular 4

In the component below, an external API service is called within the ngOnInit function to retrieve an array of gifs stored in this.items. The issue arises when the applyGif function is triggered by a user clicking on an image. This function resets the For ...

Create an object with an asynchronous function/promise declaration

I have a function that returns an object with different functions that I can use. I want to incorporate promises into these functions for better asynchronous handling. var DATABASE = (function () { var exports = {}; exports.query = function(filter = ...

I'm struggling with developing react applications due to problems with canvas elements

I am currently using an M1 MacBook Pro, with Node version 15.4.1 and npm version 7.0.15. When I ran the command npx create-react-app my-app, it gave me this output: I have attempted various solutions but keep encountering the same issue related to "canva ...

Angular - Collaborative HTML format function

In my project, I have a function that sets the CSS class of an element dynamically. This function is used in different components where dynamic CSS needs to be applied. However, every time I make a change to the function, I have to update it in each compo ...

Expanding Perspective in React Native

Having trouble with implementing a camera feature that isn't scaling correctly. The issue seems to be related to the styling of the container View, as when the camera is rendered independently it works fine. The goal is for the camera to activate when ...

The AJAX request seems to be malfunctioning despite the fact that both the PHP and JS files function correctly independently

I have set up an AJAX call and tested the JS file by alerting out the POST values being sent along with the data string. Everything seems fine at that point. I then passed these values to the PHP file where they are required, making sure to keep it simple ...

PHALCON array entry now in place

Currently, I am facing an issue while trying to insert multiple data from an array. It seems that only the last piece of data is being inserted each time. Below is the front-end code snippet responsible for sending the data: let payload = new FormData(); ...

Issues with the orderBy function are causing unexpected behavior

After creating 3 groups - priority 1, 2, and 3 with orderBy:priorty for each pushed task to go into their designated group, I noticed some strange behavior within the groups where they don't sort properly when more data is added. <input ng-model=" ...

A guide on scheduling automatic data insertion in mongoose.js

I'm working on a website with Node.js and Mongoose, and I could use some guidance on how to automatically insert data into Mongoose with Node.js at specific times. For example, at the end of each month, I want my current data to be stored in the Mongo ...

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

String ES6 syntax immediately after function

return pool.query`select * from mytable where id = ${value}` How can the code snippet above be rewritten in full JavaScript? I attempted to use: return pool.query(`select * from mytable where id = $(value)`) but it seems like there is a difference. Th ...

Create a VueJs component and globally register it with a unique custom style

I am looking to integrate Vue-Select into my VueJs project by creating a WebPack configuration that exports separate files for vendors and pages. Vue-Select offers a lot of customization options, and I want to centralize these settings in a single file for ...

Intermittent occurrence of (404) Not Found error in the SpreadsheetsService.Query function

Using the Spreadsheet API, I frequently update various sheets. Occasionally, and without any pattern, the SpreadsheetsService.Query function returns a (404) Not Found error. This issue does not seem to be related to internet connectivity or server downti ...

Building an Angular form that is reactive and dynamically populates fields from an array

I am currently working with Angular 9 and I am facing a challenge in implementing a component that utilizes reactive forms. Below is a snippet of my code: approval-edit.component.ts public nominationAllOf: NominationAllOf[]; public approvalEditForm: Form ...