[Vuejs]-Using VueX to add an element to an array and remove an element from the array?

by

0👍

Use $event to access the event in an inline handler.

<button @click="removeName($event.target.value)">

0👍

As mentioned in the documentation–

A method handler automatically receives the native DOM Event object
that triggers it.

In your case, when the remove button triggers the removeName method, it will auto-receive the event, you don’t need to pass it unless this is the only param you are passing.

Now, there are two problems in your code-

  1. You are passing event but you should use $event, a special variable. If you want to pass event, then use arrow function syntax. Read here.
  2. Even if removeName(event.target.value) works, then it means you are already passing the target value, then inside the method, you should access it like removeName(target_value) not removeName(event). By doing that, you are further trying to access value from the value itself.

So, do the following fixes in your code and it should work-

In template-

 <button @click="removeName">Remove</button>

In JS (same as you are using)-

const removeName = (event) => store.dispatch('remove-name', { name: event.target.value })

Leave a comment