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

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

ただいまの
回答率

88.60%

Vue.jsでユーザープロフィール編集ページの作り方

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,155

Khy

score 74

Vue.js、Vuetify、firebaseを使いwebアプリを作成しております。
ユーザーが自分のプロフィールを編集するページを作っているのですが、行き詰ってしまいました。

「プロフィールを編集」ボタンを押したら入力フォームを表示し編集できるようにし、その際に「更新」ボタンを押したらデータを更新、「キャンセル」ボタンを押したら入力した内容を破棄して戻るようにしたいです。
1回目はキャンセルボタンがきちんと動作するのですが2回目以降はキャンセルが効かずに変更されてしまいます。

まだVueを勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。宜しくお願い致します。

<template>
  <div>
    <v-btn flat outline v-if="!isEdit" @click="edit" class="ml-4">プロフィールを編集</v-btn>
    <v-btn flat outline v-if="isEdit" @click="update" v-bind:disabled="noChange" class="red red--text ml-4">更新</v-btn>
    <v-btn flat outline v-if="isEdit" @click="cancel">キャンセル</v-btn>
    <v-layout align-center>
      <v-flex xs3><v-subheader>名前</v-subheader></v-flex>
      <v-flex xs9 v-if="!isEdit">{{currentUser.onamae}}</v-flex>
      <v-flex xs9 v-if="isEdit">
       <v-text-field v-model="currentUser.onamae"></v-text-field>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import firebase from 'firebase'
import db from '@/fb'

export default {

  data(){
    return{
      isEdit: false,
      updated: false,
    }
  },

  methods: {
    edit(){
      this.isEdit = true;
      this.updated = false;
    },

    update(){
      this.newUserData = {
        onamae: this.currentUser.onamae,
      };

      this.currentUserEmail = firebase.auth().currentUser.email;  //ログイン中ユーザのメールアドレスを取得
      var currentUserDoc = db.collection('users').doc(this.currentUserEmail);  //ログイン中ユーザーのドキュメントを代入
      currentUserDoc.update(this.newUserData)
      .then(function(docRef) {
          console.log("Document written with ID: ", docRef);
          location.reload();  //ページをリロード
      })
      .catch(function(error) {
          console.error("Error adding document: ", error);
      });
    },

    cancel(){
      this.isEdit = false;
      this.$store.commit('setUser', this.oldUserData);
    },
  },

  computed: {

    changes: function() {
      const changes = [];
      const orig = this.oldUserData;
      const dest = this.currentUser;
      Object.keys(orig).forEach(function(key) {
        if (orig[key] != dest[key]) {
          changes.push({name: key});
        }
      });
      return changes;
    },

    noChange: function() {
    // 何か情報がオリジナルと変わったときだけ、更新ボタンをアクティブにする。
      return !(this.isEdit && this.changes.length > 0);
    },

    currentUser: function(){
      return this.$store.getters.currentUser;
    },

    oldUserData(){
      return this.$store.getters.oldUserData;
    },
  }
}  
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

操作手順とストアの詳細がどうなってるのか分からないのでこれで直るか不明ですが、

<v-text-field v-model="currentUser.onamae"></v-text-field>

↑の部分で v-model に computed の値を入れているのに対して、

    currentUser: function(){
      return this.$store.getters.currentUser;
    },

↑の部分で算出 Setter 関数が定義されてないので不具合が出るのではないかと思います。

    currentUser: {
      get: function(){
        return this.$store.getters.currentUser;
      },
      set: function(newValue){
        // ストアへの保存処理
      }
    },

参考リンク

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/07 11:58

    ご返信が遅れてしまい申し訳ございません。
    changesのところを修正したところ何とか上手く動作するようになりました!
    v-modelを使用しているのにsetterを定義していないとのこと確認不足でした、ご指摘ありがとうございます!まだまだ勉強不足なので、精進してまいります。

    キャンセル

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

  • ただいまの回答率 88.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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