When writing an application I get the same error as in the title. I create an application in Vue and store the data in the firestore.
The data is sent via this.$store.dispatch ('function')
. I get an error in this file on line 47 EditNote.vue
methods: {
editNote() {
this.$store.dispatch('editNote', this.docId, {
content: this.note.content
});
this.note.content = '';
}
})
and I have no idea what it is, maybe some of you can help me. Thank you if any of you could help. 🤞
./src/components/EditNote.vue
<template>
<div class="editnote">
<div class="content">
<div class="content__header">
<h2 class="content__title">
Edytuj notatkę 🐝
</h2>
<span class="content__close" @click="$emit('close')">
<i class="fas fa-times"></i>
</span>
</div>
<div class="content__inside">
<form @submit.prevent>
<textarea
class="content__textarea"
v-model.trim="note.content"
rows="6"
cols="20"
:placeholder="this.noteContent"
></textarea>
<span class="content__plus-icon" @click="editNote"
><i class="fas fa-edit"></i
></span>
</form>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
props: ['docId', 'noteContent'],
data() {
return {
note: {
content: ''
}
};
},
methods: {
editNote() {
this.$store.dispatch('editNote', this.docId, {
content: this.note.content
});
this.note.content = '';
}
}
};
</script>
./src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as fb from '../firebase';
import router from '../router/index';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
userProfile: {},
notes: []
},
mutations: {
setUserProfile(state, val) {
state.userProfile = val;
},
setNotes(state, val) {
state.notes = val;
}
},
actions: {
async getNotes() {
await fb.usersCollection
.doc(fb.auth.currentUser.uid)
.collection('notes')
.orderBy('createdOn', 'desc')
.onSnapshot(snapshot => {
let notesArray = [];
snapshot.forEach(doc => {
let note = doc.data();
note.id = doc.id;
notesArray.push(note);
});
store.commit('setNotes', notesArray);
});
},
async addNote({}, note) {
await fb.usersCollection
.doc(fb.auth.currentUser.uid)
.collection('notes')
.add({
createdOn: new Date(),
content: note.content,
userId: fb.auth.currentUser.uid
});
},
async editNote({ commit }, docId, note) {
await fb.usersCollection
.doc(fb.auth.currentUser.uid)
.collection('notes')
.doc(docId)
.update({
createdOn: new Date(),
content: note.content
});
},
async deleteNote({}, docId) {
if (window.confirm('Jesteś pewny/a, że chcesz usunąć notatkę?')) {
await fb.usersCollection
.doc(fb.auth.currentUser.uid)
.collection('notes')
.doc(docId)
.delete();
}
},
async signup({ dispatch }, form) {
// sign user up
const { user } = await fb.auth.createUserWithEmailAndPassword(
form.email,
form.password
);
// create user profile object in userCollection
await fb.usersCollection.doc(user.uid).set({
username: form.username,
email: form.email,
password: form.password
});
// fetch user profile and set in state
dispatch('fetchUserProfile', user);
router.push('/login');
},
async login({ dispatch }, form) {
// sign user in
const { user } = await fb.auth.signInWithEmailAndPassword(
form.email,
form.password
);
// fetch user profile and set in state
dispatch('fetchUserProfile', user);
},
async logout({ commit }) {
await fb.auth.signOut();
// clear userProfile and redirect to /login
commit('setUserProfile', {});
router.push('/login');
},
async fetchUserProfile({ commit }, user) {
// fetch user profile
const userProfile = await fb.usersCollection.doc(user.uid).get();
// set user profile in state
commit('setUserProfile', userProfile.data());
// change router to dashboard
if (router.currentRoute.path === '/login') {
router.push('/');
}
}
},
modules: {}
});
export default store;
./src/views/Homepage.vue
<transition
enter-active-class="animate__animated animate__backInUp animate__faster"
leave-active-class="animate__animated animate__backOutDown animate__faster"
mode="out-in"
appear
>
<EditNote
v-if="showEditNote"
@close="toggleEditNote()"
:docId="selectedNote"
:noteContent="selectedNoteContent"
></EditNote>
</transition>
<div class="notes">
<div
class="notes__container-title-icon"
@click="toggleAddNotes"
>
<h3 class="notes__title">Notatki</h3>
<span class="notes__plus-icon">
<i class="fas fa-plus"></i>
</span>
</div>
<ul class="notes__list" v-if="notes.length">
<li
class="notes__item"
v-for="note in notes"
:key="note.id"
>
{{ note.content }}
<br />
<span class="notes__createdOn">{{
getCurrentDate(note.createdOn)
}}</span>
<br />
<div class="notes__extras">
<span
class="notes__edit"
@click="toggleEditNote(note.id, note.content)"
><i class="far fa-edit"></i
></span>
<span
class="notes__delete"
@click="deleteNote(note.id)"
><i class="far fa-trash-alt"></i
></span>
</div>
</li>
</ul>
<ul class="notes__list" style="list-style-type: none" v-else>
<li class="notes__item">
Nie ma żadnej notatki 😢
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import AddNotes from '@/components/AddNotes';
import EditNote from '@/components/EditNote';
import { mapState } from 'vuex';
export default {
data() {
return {
showAddNotes: false,
showEditNote: false,
selectedNote: '',
selectedNoteContent: '',
};
},
components: {
AddNotes,
EditNote
},
computed: {
...mapState(['userProfile', 'notes']),
},
beforeMount() {
this.getCurrentDate();
},
created() {
this.getNotes();
},
methods: {
toggleEditNote(docId, noteContent) {
this.showEditNote = !this.showEditNote;
if (this.showEditNote) {
this.selectedNote = docId;
this.selectedNoteContent = noteContent;
} else {
this.selectedNote = {};
this.selectedNoteContent = {};
}
},
toggleAddNotes() {
this.showAddNotes = !this.showAddNotes;
},
getNotes() {
this.$store.dispatch('getNotes');
},
deleteNote(docId) {
this.$store.dispatch('deleteNote', docId);
},
The issue is with the editNote
action. Actions can only receive one argument so you'll need to pass multiple values as an object or array. Change it to:
async editNote({ commit }, { docId, note }) { // Notice the braces
await fb.usersCollection
.doc(fb.auth.currentUser.uid)
.collection('notes')
.doc(docId)
.update({
createdOn: new Date(),
content: note.content
});
},
And call it in your component this way:
methods: {
editNote() {
const docId = this.docId;
const note = {
content: this.note.content
};
this.$store.dispatch('editNote', { docId, note }); // Notice the braces
this.note.content = '';
}
}