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

Question

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;
    },
  }
}  

  

Answer 1

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

<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){
        // ストアへの保存処理
      }
    },

参考リンク

• 算出プロパティとウォッチャ > 算出 Setter 関数

Comments

[Khy]

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