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

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

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

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vuex

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

受付中

TypeError: Cannot read properties of undefined (reading 'date')

F_Yohei
F_Yohei

総合スコア14

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vuex

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0回答

0評価

0クリップ

557閲覧

投稿2022/02/26 23:13

前提・実現したいこと

更新ボタンを押した時に入力を修正した場所が更新されるようにしたい。

VueとGASを使って家計簿アプリの作成をしています。
GASはまだ実装しておりません。

エラーコード

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'date')" TypeError: Cannot read properties of undefined (reading 'date')

該当のソースコード

html

<v-btn color="blue darken-1" text :disabled="!valid" :loading="loading" @click="onClickAction" >{{ actionText }}</v-btn>

※{{ actionText }}には追加か更新の文字が入ります。

vue

<script> import { mapActions, mapGetters } from "vuex"; export default { name: "ItemDialog", data() { return { /** ダイアログの表示状態 */ show: false, /** 入力したデータが有効かどうか */ valid: false, /** 日付選択メニューの表示状態 */ menu: false, /** ローディング状態 */ loading: false, /** 操作タイプ 'add' or 'edit' */ actionType: "add", /** id */ id: "", /** 日付 */ date: "", /** タイトル */ title: "", /** 収支 'income' or 'outgo' */ inout: "", /** カテゴリ */ category: "", /** タグ */ tags: [], /** 金額 */ amount: 0, /** メモ */ memo: "", /** 選択カテゴリ一覧 */ categoryItems: [], /** 編集前の年月(編集時に使う) */ beforeYM: "", /** バリデーションルール */ titleRules: [ v => v.trim().length > 0 || "タイトルは必須です", v => v.length <= 20 || "20文字以内で入力してください" ], tagRule: v => v.length <= 5 || "タグは5種類以内で選択してください", amountRules: [ v => v >= 0 || "金額は0以上で入力してください", v => Number.isInteger(v) || "整数で入力してください" ], memoRule: v => v.length <= 50 || "メモは50文字以内で入力してください" }; }, computed: { /** ダイアログのタイトル */ titleText() { return this.actionType === "add" ? "データ追加" : "データ編集"; }, /** ダイアログのアクション */ actionText() { return this.actionType === "add" ? "追加" : "更新"; }, ...mapGetters([ /** 収支カテゴリ */ "incomeItems", "outgoItems", /** タグ */ "tagItems" ]), ...mapActions([ /** データ追加 */ "addAbData", /** データ更新 */ "updateAbData" ]) }, methods: { /** 追加/更新がクリックされたとき */ onClickAction() { const item = { date: this.date, title: this.title, category: this.category, tags: this.tags.join(","), memo: this.memo, income: null, outgo: null }; item[this.inout] = this.amount || 0; if (this.actionType === "add") { item.id = Math.random() .toString(36) .slice(-8); // ランダムな8文字のIDを生成 this.addAbData({ item }); } else { item.id = this.id; this.updateAbData({ beforeYM: this.beforeYM, item: item }); console.log(item); } this.show = false; }, } }; </script>

vue

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); /** * State * Vuexの状態 */ const state = { /** 設定 */ settings: { appName: "GAS 家計簿", apiUrl: "", authToken: "", strIncomeItems: "給料, ボーナス, 繰越", strOutgoItems: "食費, 趣味, 交通費, 買い物, 交際費, 生活費, 住宅, 通信, 車, 税金", strTagItems: "固定費, カード", }, /** 家計簿データ */ abData: {}, }; const mutations = { /** 指定年月のデータを更新します */ updateAbData(state, { yearMonth, item }) { const list = state.abData[yearMonth]; if (list) { const index = list.findIndex((v) => v.id === item.id); list.splice(index, 1, item); } }, }; const actions = { /** データを更新します */ updateAbData({ commit }, { beforeYM, item }) { const yearMonth = item.date.slice(0, 7); if (yearMonth === beforeYM) { commit("updateAbData", { yearMonth, item }); return; } const id = item.id; commit("deleteAbData", { yearMonth: beforeYM, id }); commit("addAbData", { item }); }, };

updateAbDataをdispachする時に渡したい値をオブジェクトにしているので、値をStoreに渡すことはできているのでundefinedと出てしまいます。

// this.updateAbData({ beforeYM: this.beforeYM, item: item });

をコメントアウトして更新ボタンを押してconsole.logでupdateAbDataの中にあるitemの中を見るとしっかりと値は取れてきています。

{date: '2022-02-02', title: '収入サンプル', category: '給料', tags: 'タグ1,タグ2', memo: 'メモ', …} category: "給料" date: "2022-02-02" id: "7c8fa764" income: 2000 memo: "メモ" outgo: null tags: "タグ1,タグ2" title: "収入サンプル" [[Prototype]]: Object

解決方法が分からない為、ご教示いただけると助かります。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vuex

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。