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

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

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

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

1回答

8828閲覧

【Vue.js】TypeError: this.xxx is not a functionが解決しない

sawaIT

総合スコア21

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

1グッド

1クリップ

投稿2019/06/03 16:03

編集2019/06/04 03:08

前提・実現したいこと

problemという変数にモーダルの中にあるフォームの入力値と最初から定義してある値を入れてStoreおよび、Firebaseに格納したいです。

Storeについては別のアプリケーションから流用しているものなので、
問題ないと認識しておりオブジェクト自体も、流用元の返り値同じような形できております。

Template側に問題があると踏んでおりますが
どなたかご教示お願いいたします。

{__ob__: Observer} question: "どうすればいいですか?" question_date: "Mon, 03 Ju" questioner: "name" __ob__: Observer {value: {…}, dep: Dep, vmCount: 0} get question: ƒ reactiveGetter() set question: ƒ reactiveSetter(newVal) get question_date: ƒ reactiveGetter() set question_date: ƒ reactiveSetter(newVal) get questioner: ƒ reactiveGetter() set questioner: ƒ reactiveSetter(newVal) __proto__: Object

発生している問題・エラーメッセージ

[Vue warn]: Error in v-on handler: "TypeError: this.addProblem is not a function" found in ---> <VBtn> <VForm> <VCard> <ThemeProvider> <VDialog> <ProblemManagement> at src/components/ProblemManagement.vue <Content> at src/components/Content.vue <VApp> <Documents> at src/views/Documents.vue <VContent> <VApp> <App> at src/App.vue <Root> warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862 invoker @ vue.runtime.esm.js?2b0e:2179 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 Vue.$emit @ vue.runtime.esm.js?2b0e:3882 Vue.(anonymous function) @ backend.js:1140 click @ VBtn.js?8336:75 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:1888 TypeError: this.addProblem is not a function at VueComponent.submit (ProblemManagement.vue?0cc9:92) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3882) at VueComponent.Vue.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1140:28) at VueComponent.click (VBtn.js?8336:75) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179) at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862 invoker @ vue.runtime.esm.js?2b0e:2179 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 Vue.$emit @ vue.runtime.esm.js?2b0e:3882 Vue.(anonymous function) @ backend.js:1140 click @ VBtn.js?8336:75 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6911

該当のソースコード

Vue.js

1<template> 2 <v-container> 3 <v-layout wrap></v-layout> 4 <v-flex xs12> 5 <v-dialog ref="dialog" full-width lazy> 6 <template v-slot:activator="{ on }"> 7 <v-btn block color="info" @click="modal = true" v-on="on">質問を追加する</v-btn> 8 </template> 9 <v-card> 10 <v-form> 11 <v-flex xs12 ma-auto> 12 <v-text-field v-model="problem.question" label="質問" my-0 py-0></v-text-field> 13 </v-flex> 14 <v-btn color="info" @click="add">追加</v-btn> 15 </v-form> 16 </v-card> 17 </v-dialog> 18 </v-flex> 19 </v-container> 20</template> 21<script> 22import { mapActions } from "vuex"; 23 24export default { 25 computed: mapGetters(["problems", "userName"]), 26 data() { 27 return { 28 problem: { 29 question: "", 30 questioner: "", 31 question_date: new Date().toUTCString().substr(0, 10) 32 } 33 }; 34 }, 35 methods: { 36 add() { 37 this.problem.questioner = this.userName; 38 console.log(this.problem); 39 this.addProblem(this.problem); //ypeError: this.addProblem is not a function 40 this.problem = {}; 41 } 42 }, 43 ...mapActions(["addProblem"]) 44}; 45</script>

store

1 mutations: { 2 addProblem(state, { id, problem }) { 3 problem.id = id; 4 state.problems.push(problem); 5 } 6 }, 7 actions: { 8 addProblem({ getters, commit }, problem) { 9 if (getters.uid) { 10 firebase 11 .firestore() 12 .collection(`users/${getters.uid}/problems`) 13 .add(problem) 14 .then(doc => { 15 commit("addProblem", { id: doc.id, problem }); 16 }); 17 } 18 },

試したこと

複数サイトを見て、定義されていないか、期待値と違うというように記載されていたため下記のようなことをしてみましたが解決しませんでした
・関数名を変える
・配列の中身を変えてみる

補足情報(FW/ツールのバージョンなど)

vue -V (vue cli)
3.5.0

Spanaic👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sawaIT

2019/06/04 03:07

取り急ぎですが、vue cliのバージョンです (素のVueのバージョンは別途確認します)
guest

回答1

0

ベストアンサー

methods: { add() { this.problem.questioner = this.userName; console.log(this.problem); this.addProblem(this.problem); //ypeError: this.addProblem is not a function this.problem = {}; } }, ...mapActions(["addProblem"])

ではなく

methods: { add() { this.problem.questioner = this.userName; console.log(this.problem); this.addProblem(this.problem); //ypeError: this.addProblem is not a function this.problem = {}; }, ...mapActions(["addProblem"]) },

ではないでしょうか?

投稿2019/06/04 04:21

YukiYamashina

総合スコア1011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sawaIT

2019/06/04 04:42

ご回答ありがとうございます。 全くその通りでした大変お恥ずかしい限りです。 また何かあれば宜しくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問