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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

take-t.t.
take-t.t.

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

53閲覧

投稿2019/07/10 16:35

編集2022/01/12 10:58

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

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

html

<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>

JavaScript

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のように、仮に全て手動でアコーディオンを開ける or 閉めるかした場合、一度意味のないtogglleAllを実行しなければなりません。(勝手にClose allには切り替わってくれないため)

→imigurに飛びます

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

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

JavaScript

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

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

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」に変えてみたりもしたのですが、処理は実行されませんでした。

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。