vue.js「カレンダーの日にちをクリック→その日だけ色が変わる」には先にlistを作成する必要があるのか？？

Question

全体概要

只今laravel5.5 vue.jsにて学校システムを作成
→画像は日付をclickするとその日の授業可能先生一覧がでてくる機能です

実現したいこと

vue.jsにて日付をclickするとその部分だけ水色になるようにする

現状

元々は下記コードのようにlaravelのfor文を使用し日にちを表示させていた
(document読みましたが、vue.jsにforeachの機能はあるが、forはない??)

<ul class="list-inline text-center">
    @for($i=0; $i<=7; $i++)
        <li class="date list-inline-item" v-on:click='change_date({{$i}})'>
            {{date("d", strtotime("+".$i."day"))}}
        </li>
    @endfor
</ul>

ここで「clickされて日付の色が変更する」実装を追加
→v-bind:class="{ active: choosed }"を追加しclassの追加・削除で制御
→<li>のそれぞれにchoosedの要素を持たせなければいけない
→下記のようにJSONでlistを定義してからv-forでまわす必要があるのか？？

const week = {
    date0: {date_id: 0, choosed: false},
    date1: {date_id: 1, choosed: false},
    date2: {date_id: 2, choosed: false},
    date3: {date_id: 3, choosed: false},
    date4: {date_id: 4, choosed: false},
    date5: {date_id: 5, choosed: false},
    date6: {date_id: 6, choosed: false}
}

JQueryのこんな感じで簡単に実装できればいいのに。。。と思っております

$("li").on("click", function() {
	$("li").removeClass("choosed"); //消す
	$(this).addClass("choosed"); //指定された要素のみ付与
});

よろしくお願いいたします。

Comments

[kawakawa2018]

確認です。「document読みましたが、vue.jsにforeachの機能はあるが、forはない??」　このdocumentの名前、参照URLなど追記してください。

Answer 1

vueの考え方はjqueryと全然違いますけどね。

まず、vueはフレームワークであるので、forやforeachなどと関係がなくて、
リストレンダリングというものがあります。
ガイドのリンク
実際はこんな感じで、

<ul>
    <li v-for="(element,index) in 7">{{index}}:{{element}}</li>
</ul>

「clickされて日付の色が変更する」に関して、
Vueでも簡単に実現できますよ。codepenリンク

<div id="app">
  <ul>
    <li v-for="(item,index)  in items" :class="{active: choosed===index}" @click="choosed=index">{{index}}:{{item}}</li>
  </ul>
  
</div>

li.active{
  color:red;
}

new Vue({
  el:'#app',
  data:function(){
    return {
      choosed:0,
      items:['aa','bb','cc']
    }
  }
})

簡単でしょう( ´∀｀ )

追伸：個人的な意見なんですけど、laravelとvuejsは分けて勉強した方がいいかな

Comments

[kazoogon]

ありがとうございます、解決いたしました！
またこれからの参考とさせていただきたいのですが、例えばvue.js公式ドキュメントや「vue.js for」などで検索しても「<li v-for="(element,index) in 7">」という方法は見つかりませんでした。　また回答していただいた方法など、これらはtoyjackさんはどのように見つけられたのか？　もしくは自分で考えてこれでいけるんじゃね？？　なのか？　こちらの回答いただけたら幸いです、よろしくお願いいたします。

[toyjack]

ありがとうございます。
どっかのチュートリアルで見たかな。詳しくは忘れて、ごめんなさい。