https://stackblitz.com/edit/vue-script-setup-with-vuex-gfjaff?file=src/components/UserProfile.vue
I'm currently working on a feature where I can input a name into a dispatch function and have it added to an array. Eventually, I plan to include a text input field for this purpose but for now, I'm taking baby steps.
After adding names to the array, I want to be able to click on a delete button next to each name to remove it. However, I seem to be facing some challenges when trying to implement "event.target.value". This seems to be causing issues in my code.
Can someone help me identify what's not right in the code? What part am I missing or getting wrong?
store.js
import { createStore } from 'vuex'
export default createStore({
state: () => ({
list: ['bob', 'joe', 'harry'],
}),
getters: {
listStatus: (state) => state.list,
},
actions: {
addName({ commit }, { name }) {
commit('ADD_NAME', name)
},
removeName({commit}, {name}) {
commit('REMOVE-NAME', name)
}
},
mutations: {
ADD_NAME(state, name) {
state.list.push(name)
},
REMOVE_NAME(state, event_target_name){
state.list.filter(element => element !== event_target_name)
}
},
})
userList.vue
<template>
<div v-for="name in listStatus">
<li>{{ name }}</li>
<button @click="removeName(event.target.value)">Remove</button>
</div>
<button @click="addName">ADD NAME</button>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const listStatus = computed(() => store.getters.listStatus)
// const addName = (input_name) => store.dispatch('addName', { name: input_name }) --------- DOESN'T WORK
const addName = () => store.dispatch('addName', { name: 'tommy' })
const removeName = (event) => store.dispatch('remove-name', { name: event.target.value })
</script>