【Vue.js】メソッド実行した際のコンポーネントの更新・再レンダリング if編

はじめに

例えばCRADメソッドを実行、
その後コンポーネントの一部分だけ更新したいとき。

環境

@vue/cli 4.4.6

解説

v-ifを使ったら、コンポーネントが再計算されます。

以下をすることで、
子コンポーネントで処理が終わったあとに、
ページ更新などをしなくても再描画されます。

前提知識
①emit → 子から親のメソッドをいじれたりする
②$nextTick → DOMの更新サイクル後に、子コンポーネントを再計算させる。
(単純にtrue→false→trueとやっても再描画はうまく行かない。)

Parent.vue

<template>
  <div>
    <child v-if="showChild" @add="toggle"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child
  },
  data() {
    return {
      showChild: true
    };
  },
  methods: {
    toggle() {
      this.showChild = false;
      this.$nextTick(() => (this.showChild = true));
    }
  }
};
</script>

Child.vue

<template>
    <button @click="add">追加する</button>
</template>

<script>
    export default {
        methods: {
            add(){
                //何かしらCRAD等の処理の後に↓
                this.$emit('add');
            }
        }
    }
</script>

ご参考にさせていただいた記事

https://tomatoaiu.hatenablog.com/entry/2019/09/28/133319
https://qiita.com/shosho/items/b9b24a52dc0cc0fc33f5