Vue.jsで親コンポーネントのdataに定義された配列の値を監視して、その変更に応じて子コンポーネントから処理を行いたい

Question

少し長くなってしまい申し訳ないのですが、宜しければお付き合いください。

現在Vue.jsを使って、以下のコードで複数あるアコーディオンの開閉を一度に行う「toggleAll」メソッドを定義しています。
アコーディオンはこのコンポーネントからpropsでdataを渡し、子コンポーネントである<AccordionComponent>内でv-forを使いレンダリングしているものです。

<section>
  <div class="skills-box">
    <h3>My Skills</h3>
    <div class="show-box">
      <p>Click the item <span>or</span></p>
      <a class="show-all" v-on:click="change(); toggleAll()"> <!-- この部分です -->
        {{ toggleMessage }}
        <i class="fas fa-sort"></i>
      </a>
    </div>
    <AccordionComponent v-bind:skills="skills"></AccordionComponent> <!-- 子コンポーネント -->
  </div> 
  <router-link to="/" class="move"><i class="fas fa-angle-left"></i> BACK</router-link>
</section>

import AccordionComponent from '../components/Accordion.vue'
export default {
  name: 'Skills',
  data() {
    return {
      skills: [
        {id: 1, name: 'HTML・CSS', bgColor: 'orangered', show: false, description: `text`},
        {id: 2, name: 'Sass', bgColor: 'hotpink', show: false, description: `text`},
        {id: 3, name: 'JavaScript', bgColor: 'gold', show: false, description: `text`},
        {id: 4, name: 'Vue.js', bgColor: 'mediumseagreen', show: false, description: `text`},
        {id: 5, name: 'Firebase', bgColor: 'orange', show: false, description: `text`},
        {id: 6, name: 'PHP', bgColor: 'steelblue', show: false, description: `text`},
        {id: 7, name: 'Git・Github', bgColor: 'black', show: false, description: `text`},
        {id: 8, name: 'webpack', bgColor: 'skyblue', show: false, description: `text`},
      ], //skills
      toggleMessage: 'Show all'
    }
  },
  methods: {
    change: function() {
      if(this.toggleMessage === 'Show all') {
        this.toggleMessage = 'Close all'
      } else {
        this.toggleMessage = 'Show all'
      }
    },
    toggleAll: function() {
      for(let skill of this.skills) {
        if(this.toggleOpen === 'Show all') {
          skill.show = true
        } else {
          skill.show = false
        }
      } // for of
    },
  },
  components: {
    AccordionComponent
  }
}

各アコーディオンの開閉は上記の配列「skills」内のオブジェクトが各々持っている「show」の真偽値によって管理しているのですが、「toggleAll」はその「show」全ての真偽値を一斉に切り替えるメソッドです。
しかしこのコードですと、下記のgifのように、仮に全て手動でアコーディオンを開けた場合、一度意味のないtogglleAllを実行しなければなりません。（勝手にClose allには切り替わってくれないため）

→imigurに飛びます

そのため、配列skills内のshowの真偽値を監視して、全ての「show」がtrueまたはfalseになった時に「toggleMessage」の値を変更したいと考えております。

とりあえず真偽値が全てtrueまたはfalseだった時に「toggleMessage」を変更する、という処理を行うコードは下記のように考えたのですが、これをどう正しく動く形でVueの算出プロパティ等に反映してよいか分からずに困っています。
公式のリファレンスにも中にこのように複数の関数を入れ込む方法が載っておらず、エラーになってしまい私のスキルでは解決できないため手詰まりになってしまっています。

let toggleMessage = 'Show all';

const skills = [
  {id: 1, name: 'item1', show: true},
  {id: 2, name: 'item2', show: true},
  {id: 3, name: 'item3', show: true}
];

const checkTrue = skills.every(value => value.show === true );
const checkFalse = skills.every(value => value.show === false );

if(checkTrue === true) {
	toggleMessage = 'Close all';
} else if(checkFalse === true) {
	toggleMessage= 'Show all';
}

そして何より、この一連の単純な動作のために3つに分けてここまでグチャグチャと書かなければいけないのか、ということも我ながら疑問に思っています。
もし、もっと効率の良い方法があれば教えていただけると幸いです。

JavaScriptの基礎が少し怪しいため、分かりづらいコード・質問になってしまい本当に申し訳ありませんが、何卒お力添えをよろしくお願いいたします。

※追記です
下記のコードをコンポーネント内に追加いたしました。

updated: function() {
  alert('updated')
  const checkTrue = this.skills.every(value => value.show === true )
  const checkFalse = this.skills.every(value => value.show === false )
  if(checkTrue === true) {
    this.toggleMessage = 'Close all'
  } else if(checkFalse === true) {
    this.toggleMessage = 'Show all'
  }
},

しかし思い通りの挙動にはなっておらず、どうやらアコーディオンの開閉ではアラートが表示されなかったので、そのタイミングでは処理は行われていないようです。
試しに「toggleAll」メッソドを実行してみると、アラートが表示されました。
公式で「仮想DOMが再描画されたタイミング」とあったので、「v-show」で行っていたアコーディオンの開閉を「v-if」に変えてみたりもしたのですが、処理は実行されませんでした。

Answer 1

これはライフサイクルメソッドを使うとうまくいくかも知れません。
Vue公式ライフサイクルメソッド

export default {
  updated: {
    alert('updated')  // 動作確認用
    const checkTrue = this.skills.every(value => value.boolean === true );
    const checkFalse = this.skills.every(value => value.boolean === false );

    if(checkTrue === true) {
      this.sampleText = 'Close all';
    } else if(checkFalse === true) {
      this.sampleText = 'Show all';
    }
  }
}

こちらのupdatedメソッドは、仮想DOMが変更される度に実行されます。
この場合だとアコーディオンが動く度に実行されるはずです。
動作確認をしていないのですが、参考になれば幸いです。

Comments

[take-t.t.]

ご回答ありがとうございます。
ライフサイクルメソッドに関しては思いつきもしていなかったので、とても勉強になりました。

ただ残念ながら思ったようには動作しませんでした。
変更した箇所は質問文に追記させていただいたので、もしよろしければもう少しお力添えをいただければ幸いです。

[ttakatech]

細かい仕様は確認していないので分かりかねますが、もしかしたらコンポーネントごとで稼働するのかも知れません。
AccordionComponent内でupdatedメソッドとalert()を実装してみて頂けないでしょうか。

[take-t.t.]

ご返信ありがとうございます。
AccordionComponent内にupdatedを追加してみたのですが、何故かalertは実行されてもtoggleMessageの変更は実行されませんでした。

そこで試しに子コンポーネントの内容を丸ごと親コンポーネントに移してみたところ、updatedが正しく実行されました。
詳しい仕様はわからないのですが、同じ配列を参照している「toggleAll」メソッドのボタンとアコーディオンはファイルを分けないほうが良いようでした。

改めまして、複数回に渡りご回答していただきありがとうございました。

[ttakatech]

説明不足だったようです。

今回の場合は、子コンポーネント側から親コンポーネントの``toggleMessage: 'Show all'``を操作する必要があります。これを行うためには、``$emit``などを使い、親コンポーネントの``methods: {}``内にあるchange関数を呼び出す必要があります。詳しくは公式を御覧ください。
https://jp.vuejs.org/v2/guide/components.html#%E5%AD%90%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E8%B3%BC%E8%AA%AD%E3%81%99%E3%82%8B

コンポーネントでコードを分割するのは、全体のわかりやすさのために不可欠の要素です。
これを省いてはVue.jsの利点をほとんど活かせません。
理解に苦労されるかも知れませんが、是非学習してみてください。

また少し先の話になりますが、これらのデータ管理やメソッド管理に習熟し、同時に苦労を感じるようになりましたらVuexもご検討ください。
各コンポーネントの``data: {}``を一律に管理するようなことができます。

がんばってください。

[take-t.t.]

解決済みにしてしまったにも関わらず、更にご説明いただき本当にありがとうございました。
あれから格闘いたしまして、なんとか実装までこぎつけました。

以前のコードでも配列skillsの中のshowの真偽値が子コンポーネントからも変更できてしまっていたので考えもしなかったのですが、オブジェクトと普通の文字列では扱いが違う事や、なんとなくで使っていたpropsについて等、色々と詳しく知る機会になりました。

本当にありがとうございました。

[ttakatech]

????

Answer 2

なんとかttakatechさんに教えて頂いた事を元に実装できました。

親コンポーネントを以下のように変更しました

<template>
  <section>
    <div class="skills-box">
      <h3>My Skills</h3>
      <div class="show-box">
        <p class="subheading">Click the item <span>or</span></p>
        <a class="show-all" v-on:click="toggleAll(); change()">
          {{ toggleMessage }}
          <i class="fas fa-sort"></i>
        </a>
      </div>
      <accordion-component v-bind:inheritSkills="skills" v-bind:inheritMessage.sync="toggleMessage"></accordion-component> <!-- 変更しました -->
    </div> <!-- skills-box -->
    <router-link to="/" class="move"><i class="fas fa-angle-left"></i> BACK</router-link>
  </section>
</template>

子コンポーネントを以下のようにしました。

export default {
  name: 'AccordionComponent',
  props: ['inheritSkills', 'inheritMessage'], //親コンポーネント内のskillsとtoggleMessageを受け取る
  data() {
    return {
      inherit_message: this.inheritMessage //受け取った値を更に子コンポーネントのdataに格納
    }
  },
  methods: {
    toggleAccordion: function(skill) {
      this.inheritSkills.find(inheritSkills => inheritSkills.id === skill.id).show
      =
      !this.inheritSkills.find(inheritSkills => inheritSkills.id === skill.id).show
    } //アコーディオンの開閉を行う関数
  },
  updated: function() {
    alert('updated')
    const checkTrue = this.inheritSkills.every(value => value.show === true )
    const checkFalse = this.inheritSkills.every(value => value.show === false )
    if(checkTrue === true) {
      this.inherit_message = 'Close all'
    } else if(checkFalse === true) {
      this.inherit_message = 'Show all' //子コンポーネント内のdataを変更する
    }
    this.$emit('update:inheritMessage', this.inherit_message) //子コンポーネントに定義したinherit_messageを$emitを使い親コンポーネントに反映
  },
}