Не удается получить требуемый объект данных из компонента Vue

Question

Я работал над проектом в vue. У меня есть компонент Subreddit.vue. Компонент содержит форму в шаблоне, которая получает данные из формы и передает эти данные в объект с именем post. Затем метод onCreatePost(), который вызывается при отправке формы, передает его в файл subreddit хранилища. js, у которого есть действие с именем createPost(post), которое принимает объект post и получает ссылку на его документ и вставляет данные в базу данных.

Код для Subreddit.vue:

<template>
  <section>
    <h1>{{ $route.params.name }}</h1>
    <form @submit.prevent="onCreatePost()">
      <b-field label="Title">
        <b-input v-model="post.title"></b-input>
      </b-field>
      <b-field label="Description">
        <b-input type="textarea" v-model="post.description"></b-input>
      </b-field>
      <b-field label="URL" >
        <b-input v-model="post.URL" type="url"></b-input>
      </b-field>
      <button class="button is-success">Add Post</button>
    </form>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      post: {
        title: '',
        description: '',
        URL: '',
      },
    };
  },
  computed: mapState('subreddit', ['posts']),
  methods: {
    ...mapActions('subreddit', ['createPost']),
    async onCreatePost() {
      if (this.post.title && (this.post.description || this.post.URL)) {
        await this.createPost(this.post);
        console.log(this.post); // eslint-disable-line no-console
      }
    },
  },
};
</script>

Код магазина subreddit.js:

import { firestoreAction } from 'vuexfire'; // eslint-disable-line no-unused-vars
import db from '@/db';

const posts = db.collection('posts');

const state = {
  posts: [],
};

const actions = {
  async createPost(post) { // eslint-disable-line no-unused-vars
    console.log(post) // eslint-disable-line no-console
    const result = posts.doc();
    // eslint-disable-next-line no-param-reassign
    post.id = result.id;
    const postDoc = posts.doc(post.id);
    await postDoc.set(post);
  },
};

export default {
  namespaced: true,
  state,
  actions,
};

Теоретически, когда i console.log(post) (параметр createPost() в хранилище subreddit. js, значение которого получено из данного компонента vue), он должен содержать объект с данными, которые я получил от данного компонента. Однако он возвращает это:

{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
commit: ƒ (_type, _payload, _options)
dispatch: ƒ (_type, _payload, _options)
getters: {}
id: "N5S3uQvzTrGHnkZTuqMh"
rootGetters: {}
rootState:
auth: (...)
subreddit: (...)
subreddits: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get auth: ƒ reactiveGetter()
set auth: ƒ reactiveSetter(newVal)
get subreddit: ƒ reactiveGetter()
set subreddit: ƒ reactiveSetter(newVal)
get subreddits: ƒ reactiveGetter()
set subreddits: ƒ reactiveSetter(newVal)
__proto__: Object
state: {__ob__: Observer}
__proto__: Object

Я не могу понять, что этот объект возвращается, и у него нет никаких данных, которые я передал в компоненте. Как я могу получить эти данные? Пожалуйста, помогите.

Answer 1

Как подсказал @Eggon в комментариях к своему ответу, это действительно была проблема с firestore. Очевидно, что если атрибуты объекта JSON, который вы отправляете в базу данных firestore, не полны, то база данных не позволит вам вводить данные в себя. Это всего лишь гипотезы. Я мог ошибаться, но я попробовал все и решил, что это бесполезно, и вернулся к кодированию проекта, и ошибка полностью исчезла, и я смог сделать запись в базе данных. Проект на моем GitHub , если вам нужно проверить его.

Answer 2

Когда вы ссылаетесь из шаблона в методы-обработчики, вы не должны использовать (), только имя метода. Попробуйте изменить

@submit.prevent="onCreatePost()" на @submit.prevent="onCreatePost"