26 icon trans modify / アイコン切り替えロジック修正

[hasyrails]

ref #27

アイコンの切り替えはうまく行く時はどんな時か

<div>
-<p v-if="devidedSchedule.icon===1"><font-awesome-icon icon="coffee"  size="sm" /></p>
-<p v-else-if="devidedSchedule.icon===2"><font-awesome-icon icon="bath"  size="sm" /></p>
-<p v-else-if="devidedSchedule.icon===3"><font-awesome-icon icon="birthday-cake" size="sm"/></p>
+<p v-if="icon===1"><font-awesome-icon icon="coffee"  size="sm" /></p>
+<p v-else-if="icon===2"><font-awesome-icon icon="bath"  size="sm" /></p>
+<p v-else-if="icon===3"><font-awesome-icon icon="birthday-cake" size="sm"/></p><p v-else></p>
 </div>

アイコンの切り替えを Calendarコンポーネント全体で共通で定義されている データ

data(){
  icon : 0
}

を使っている時、うまく切り替えることができる

うまく切り替えれる時

全てのdevideSchedulesのアイコンが同時に切り替わってしまう

アナロジー

【Vue.js】複数のカウントボタンを、それぞれ押下した数だけカウントさせたい【Component】

コンポーネント化したら別々に切り替えることができそう

[hasyrails]

まずは

カレンダーの日付をコンポーネント化するのではなく、 参考のQiitaと同様に 簡単な例を試す

[hasyrails]

重要

今回、クリック数で変更されるcountは 親コンポーネントからわたすものではないので定義に気をつける必要あり 子コンポーネント内で定義されているのみで良い

比較

一斉に変更される場合

• 親でcountを定義
• 子にpropとしてcountを受けわたす
• 子からcountUp()メソッド発火を$emitで親に伝える
• 変更されるのは親で定義されている方のcountのため別々に変更されない

別々に変更される場合

• 子でcountを定義
• 親へcountメソッドを渡す必要なし
• countUpメソッドは子で定義して子で発火させる
• 変更されるのは各コンポーネントのため別々に変更される

結論

メソッドでcountを足し合わせていく処理

countUp(){
  this.count ++
}

のthisはどこを指しているかを考えて実装する

コンポーネント化すると そのコンポーネントの数だけthisを作れる

親で定義しただけだと変更できるのは１つしかないので一斉にしか変更できない

[hasyrails]

アイコンを連動させてみる

[hasyrails]

アイコン連動成功

[hasyrails]

カレンダーの日付をコンポーネント化する必要がある

[hasyrails]

カウントリセットをメソッドで実装

methods: {
    countUp(){
      if(this.count <3){
        this.count ++
      }else{
        this.countReset()
      }
    },
    countReset(){
      this.count = 0
    }