Currently, I have set up the code to remove the activeNote from the array called notes by using the DELETE_NOTE mutation. However, it seems that it only removes the first element of the array.
The content of mutations.js is as follows:
export const mutations = {
DELETE_NOTE (state) {
console.log(state.activeNote) // This correctly displays the selected activeNote
if (typeof state.notes !== 'undefined' && state.notes.length > 0) {
state.notes.splice(state.activeNote, 1) // This always removes the first element, regardless of the selection
if (state.notes.length === 0) {
state.activeNote.text = ''
state.activeNote.favorite = false
} else {
state.activeNote = state.notes[state.notes.length - 1]
}
}
},
SET_ACTIVE_NOTE (state, note) {
state.activeNote = note
}
}
In the actions.js file, we have:
export const actions = {
deleteNote: ({ commit }) => commit('DELETE_NOTE'),
updateActiveNote: ({ commit }, note) => commit('SET_ACTIVE_NOTE', note),
}
Furthermore, the getters are defined as:
const getters = {
activeNote: state => state.activeNote,
notes: state => state.notes,
}
Last but not least, the component that triggers the mutation looks like this:
<template>
<div id="toolbar">
<i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'toolbar',
computed: mapGetters([
'activeNote'
]),
methods: mapActions([
'deleteNote',
])
}
</script>