11 icon transition / v-ifでアイコン表示切り替え

[hasyrails]

まず、基本的なv-ifによるクリックでの表示切り替えを 簡単なもので試す → devidedScheduleの状態に合わせてアイコン切り替えができるようにする

[hasyrails]

bootstrapをインストール

Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！

[hasyrails]

スケジュール表示のスタイリングを変更

• カードに変更
• devidesSchedule.colorをカードの背景色に割り付け変更

レスポンシブスタイル機能が消えたのでのちほど実装要

[hasyrails]

アイコン埋め込み成功

[hasyrails]

v-ifで簡易的に切り替えテストする

[hasyrails]

v-ifによる表示切り替えに関する参考

表示⇄非表示の2状態の切り替えではなく、 3種類の状態を切り替えたい v-if,v-else-if,v-elseを使って条件分岐しよう - Vue.jsで条件分岐する方法

条件にクリック回数で変化するデータ：countを使う

 <div>
      <p v-if="count===1||count===4"><font-awesome-icon icon="coffee"  size="10x" /></p>
      <p v-else-if="count===2||count===5"><font-awesome-icon icon="bath"  size="10x" /></p>
      <p v-else-if="count===3||count===6"><font-awesome-icon icon="birthday-cake" size="10x"/></p>
      <p v-else>Nothing</p>
    </div>

    <div>
      <button v-on:click="count++">You clicked me {{ count }} times.</button>
    </div>

<script>
  data() {
    return {
      count: 0,
    }
</script>

クリック回数による切り替え実装完了

[hasyrails]

切り替えの条件の組み方　→　配列を作成, v-forを使う クリックするたびに配列の要素を移動して選択することができるようにする

[hasyrails]

メソッド定義, while文で実装できた

<div>
      <p v-if="count===1"><font-awesome-icon icon="coffee"  size="10x" /></p>
      <p v-else-if="count===2"><font-awesome-icon icon="bath"  size="10x" /></p>
      <p v-else-if="count===3"><font-awesome-icon icon="birthday-cake" size="10x"/></p>
      <p v-else>Nothing</p>
    </div>

    <div>
      <button v-on:click="countChange">You clicked me {{ count }} times.</button>
    </div>

<script>
methods: {
    countChange(){
      if(this.count < 3){
        this.count ++
      }else{
        this.count = 0
      }
    },
</script>

これをカレンダー内のタスクのアイコンに実装する

[hasyrails]

カレンダーのアイコンに反映完了

タスク別に変更させることができるか？

[hasyrails]

v-forが必要?

• タスク1
  • アイコン1
  • アイコン2
  • アイコン3
• タスク2
  • アイコン1
  • アイコン2
  • アイコン3

• タスク3

  • アイコン1
  • アイコン2
  • アイコン3

  ネストの配列定義が必要か

[hasyrails]

一回しか変わらない？

ハードコーディングで固定としているせいの可能性

devidedSchedulesの値もちゃんと変わってはいる

なぜv-ifが働かない？？

[hasyrails]

iconChange()メソッドを schedules[0]限定で発火するようにしている

methods: {
    iconChange(){
      if(this.schedules[0].icon < 3){
        this.schedules[0].icon ++;
      }else{
        this.schedules[0].icon = 0
      }
    },

クリックしたタスクのみに発火するようにしたい

[hasyrails]

switch分で実装

  methods: {
    iconChange(){
      switch(this.schedules[0].icon){
        case 0:
          this.schedules[0].icon = 1
          this.createDevidedSchedules();
          location.reload();
          this.schedules[0].icon = 1;    // 反映されない
          break;
        case 1:
          this.schedules[0].icon = 2
          this.createDevidedSchedules();
          location.reload();
          this.schedules[0].icon = 2;  // 反映されない
          break;
        case 2:
          this.schedules[0].icon = 3
          this.createDevidedSchedules();
          location.reload();
          this.schedules[0].icon = 3;  // 反映されない
          break;
        case 3:
          this.schedules[0].icon = 0
          this.createDevidedSchedules();
          location.reload();
          this.schedules[0].icon = 0;  // 反映されない
          break;
      }
    },

created()フックの時の リロードで反映されない

[hasyrails]

おそらく

schedules / devidedSchedules の変更が 初期値の固定で動かないことが原因。

いったん保留とする