【Vue.js】TypeError:formatDate is not a functionが出てしまいます。

Question

Vue.js、Buefy、firebaseを使いwebアプリを作成しております。
フォームに入力した情報をボタンをクリックして＠clickイベントを実行しpublishを実行しています。
その際、
TypeError:formatDate is not a function
[Vue warn]: Error in v-on handler: "TypeError: formatDate is not a function"

found in

---> <BButton>
<Create> at src/views/Create.vue
<App> at src/App.vue
<Root>
というエラーが出てしまいます。
恐らくショボいミスなのでしょうが、ご享受お願いします。

Home.vue

<template>
  <div class="home">
    <h2 class="title is-3">taitoru</h2>
    <hr>
    <Item class="item" v-for="post in posts" :key="post.id" :post="post"></Item> 
  </div>

</template>

<script>
import Item from '@/components/Item'
import { db } from '@/main'

export default {
  name: 'Home',
  components: {
    Item
  },
  data() {
    return {
      posts: []
    }
  },
   firestore() {
    return {
      posts: db.collection('posts')
    }
  }
}
</script>

Item.Vue

<template>
  <article class="message">
    <div class="message-header">
        <h2>{{ post.title }}</h2>
    </div>

    <div class="content">
       <figure class="image is-10x10">
          <div class="is-rounded" :style=" 'background-image: url(' + user.photoURL + ')' "></div>
       </figure>
       <p>{{ user.displayName }}</p>
      <div class="createAt">
       <p>{{ post.createdAt }}</p>
      </div>
      </div>
    </div>
    
    
  </article>
</template>

<script>
import { db } from '@/main'
export default {
  props: ['post'],
  data() {
    return {
      user: {}
    }
  },
  firestore() {
    return {
      user: db.collection('users').doc(this.$props.post.uid)
    }
  }
}
</script>

<template>
　　中略
<b-button type="is-primary" @click="publish" expanded>投稿する</b-button>
　　中略
</template>

<script>
import firebase from 'firebase';
import { auth } from '@/main'
import { db } from '@/main'
export default {
  data() {
    return {
      title: '',
      tags: [],
      content: '',
      tag: '',
      currentUser: {}
    }
  },
  created() {
    auth.onAuthStateChanged(user => { 
      this.currentUser = user
    })
  },
  methods: {
    addTag() {
      this.tags.push(this.tag),
      this.tag = ''
    },
    removeTag(idx) {
      this.tags.splice(idx,1)
    },
    publish() {
      const date = this.$date(new Date(), "dd MMMM, yyyy")
      db.collection('posts').add({
        title: this.title,
        tags: this.tags,
        content: this.content,
        createdAt: date,
        uid: this.currentUser.uid
      })
      .then((post) =>
        this.$router.push('/post/' + this.post.uid + '/' + this.post.id),
        alert('The post got published!')
      )
    }
  }
}
</script>

Comments

[rururu3]

再現させる為試してみたら
vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: this.$date is not a function"
っていうエラーになりました。多分vueのプラグインで$dateを定義してるかと思いますので、そちらのソースもお願いたします。

[Tikka123456]

返信ありがとうございます。VueDateFnsというプラグインを使っています。ド初心者なので定義されているソースが分かりませんでした。

Answer 1

Firebase環境無いので確認できないのですが、

    const date = this.$date(new Date(), "DD MMMM, YYYY")　// こっちではワーニングが出る
    const date = this.$date(new Date(), "dd MMMM, yyyy")　// これなら大丈夫

だけど、記載されているようなワーニングは出ないので

        createdAt: date,

これじゃないかなと…

const date = firebase.firestore.Timestamp.fromDate(new Date(`2020/01/01 00:00:00`));

こんな感じにしてみるとか、createdAtだけコメントにしてエラーでないか確認するとかしてみたらいかがでしょう。

---

やってみた

<template>
  <div>
    <button type="is-primary" @click="publish" expanded>投稿する</button>
  </div>
</template>

<style scoped>
</style>

<script>
import firebase from 'firebase'

// Initialize Firebase
firebase.initializeApp({
  適切なやつ
});

export default {
  data () {
    return {
      title: 'title',
      tags: 'tags',
      content: 'content',
      uid: 'uid',
      admin: null
    };
  },

  methods: {
    publish () {
      const date = this.$date(new Date(), 'dd MMMM, yyyy');
      let db = firebase.firestore();

      db.collection('posts').add({
        title: this.title,
        tags: this.tags,
        content: this.content,
        createdAt: date,
        uid: this.uid
      })
      .then((post) =>
        // this.$router.push('/post/' + this.post.uid + '/' + this.post.id),
        alert('The post got published!' + post)
      )
    }
  },

  created () {
  }
};
</script>

でできちゃいましたね…formatDateをソースで使ってる所あるか調べるほうがいいのかな…

Comments

[Tikka123456]

返信ありがとうございます。
const date = this.$date(new Date(), "dd MMMM, yyyy")の場合同じエラーが出て、createdAt: dateをコメントアウトしても同じエラーが出てしまいます。firestore.Timestamp.を使った場合Firebaseのセキュリティ関連のエラーが出てきました。もしかしたら、そちらが原因かもしれません。

[rururu3]

ちょっと明日余裕あるときにfirebaseの環境用意して試してみますね

[Tikka123456]

お手数おかけしてすいません。ありがとうございます。