vue.jsの削除ボタンを押した時一旦リロードを挟まないと画面に反映されない。

Question

##やりたいこと

Message.vueの63行目のonDelete()メソッドの挙動の修正です。

また、フロントはVue.js、バックエンドはFirebaseで実装しております。

##現在

削除ボタンを押すことでonDelete()が作動しても、dbの中身だけしか削除されず、画面に反映されません。
一旦リロードを挟むときちんと画面にも反映されるのですが。。。

削除ボタンあたりの挙動を記したコードは下記の通りです。

=====================================================
Message.js

static async clear() {
		const clearId = []
		const uid = firebase.auth().currentUser.uid
		const collection = await dbMessages.where('uid', '==', uid).orderBy('date').get()
    try {
			await collection.forEach(doc => {
				clearId.push(doc.id)
			})
				return clearId
		} catch (error) {
      console.error(error);
		}
	}

=======================================================

Message.vue

~
<v-btn
	color="success"
	@click="onDelete()"
>
<v-icon>mdi-trash-can-outline</v-icon>
</v-btn>
~
methods: {
	async onDelete() {
	  try {
		const id = this.i
		const docId = await MessageModel.clear()
	if(docId === []) {
          alert('削除できるデータがありません')
	}
	await dbMessages.doc(docId[id]).delete()
// console.log(await MessageModel.dbtime() - 
dbMessages.doc(docId[id]).date())
console.log(MessageModel.dbtime());
			console.log(docId[id]);
			console.log(docId);
			console.log(id);
	  } catch (error) {
	                console.error(error)
				}
			}
		}
	}

===========================================================

原因が分からないでいるのでもし宜しければアドバイス頂きたいです。
宜しくお願い致します。

Comments

[Twoshi]

お世話になっております。

おそらく削除後に最新のデータを取得する処理が抜けているように思えます。
削除した後、データを取りに行かないと画面には反映されないと思います。

[riki01]

いつもご回答ありがとうございます！
なるほど！Twoshiさんにご指摘頂いた部分の実装してみます！

Answer 1

firebaseのデータ取得については動作確認をしていないので、記述が誤っているかもしれませんが、以下のようなイメージで解決するのではと思います。
(推奨される方法では無いかもですが,,,)

Main.vue

fetchMessagesが表示データを取得する関数の認識です。
created内でdataのmessagesに代入をされていますが、fetchMessages内で代入しても良いと思います。
($emitで削除ボタンを押下した際に処理をさせたいので、代入をfetchMessages内に移動しました。)

async created() {
  await this.fetchMessages() // 呼び出しのみに変更
  // 以下省略
},
methods: {
  // 省略
  async fetchMessages() {
    let messages = []
    try {
      messages = await MessageModel.fetchMessages();
    } catch (error) {
      alert(error.message)
    }
    this.messages = messages; // return→this.messagesの代入に変更
  }
  // 以下省略
}

そして、MessageListコンポーネントにfetchMessagesを渡します。
今回はreloadとして追加しています。(適宜名称は変更してくださいm(_ _)m)

    <MessageList
      :messages="reversedMessages"
      class="container"
      @reload="fetchMessages()" // fetchMessagesをreloadに設定
    ></MessageList>

MessageList.vue

こちらもmain.vueの関数を呼び出せるようにしていきます。

template

      <Message
        :key="index"
        :time="message.time"
        :body="message.body"
        :date="message.date"
        :tag="message.tag"
        :i="index"
        @reload="reload()" // Messageコンポーネントで呼び出せるよう設定
      />

script

  props: {
    // 省略
  },
  methods: { // 新設
    reload() {
      this.$emit('reload'); // Main.vueのreloadで設定した関数の呼び出し
    }
  }

Message.vue

最後にonDelete内で$emitを利用しMessageList.vueで設定されたreloadを呼び出します。
Main → MessageList → Messageと呼び出す関数を連動(言葉の表現としては誤っているかもですが、)させているので、Main.vueのfetchMessagesが呼ばれる想定です。

    async onDelete() {
      // 省略
      this.$emit('reload'); // $emitでMessageListのreloadで設定した関数の呼び出し
    }

システムが大きくなるようであれば、上記のように$emitで連動させるようなやり方ではなくvuexを利用しstoreでデータ保持をさせて画面間で使い回したりactionを使ってデータ取得/削除をするやり方に変更いただいた方が良い気がします。

ご参考になれば幸いです。

Comments

[riki01]

Twoshiさん
いつもご回答頂きありがとうございます！
試してみたのですが、挙動は変わらず、一旦リロードを挟まないとブラウザ状の変更が行われない状態です。

せっかく細かく解説して頂いたのに申し訳ありません。
もう少しこのやり方で挑戦してみて、ダメそうならTwoshiさんがおっしゃっている通り、Vuexを用いたやり方を採用してみようと思います！
ありがとうございました！