質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

受付中

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

Tikka123456
Tikka123456

総合スコア34

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

1回答

0評価

0クリップ

738閲覧

投稿2020/06/17 06:54

編集2022/01/12 10:55

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

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

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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

rururu3

2020/06/17 08:08

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

2020/06/17 08:49

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。