Laravel/vueのちょっとした事の覚え書き。Laravel 8.xで作業した際の情報。
折畳み表示の簡単な例
<span>
<div class="btn text-green-500"
data-toggle="collapse"
aria-expanded="false"
data-target="#text_sample"
aria-controls="text_sample">折畳み▼</div>
<div class="collapse whitespace-pre text-left float-right" id="text_sample">
ここに折りたたみたいテキストを記述
</div>
</span>
ボタンを押すと折畳み切替と、ブラウザに折畳み状態を保存させる例。
//html
<button
data-toggle="collapse"
@click="saveCollapseState('testlist' + item.id, $event)"
v-bind:aria-expanded="getCollapseState('testlist' + item.id)"
v-bind:data-target="'#testlist' + item.id"
v-bind:aria-controls="'testlist' + item.id"
>
<div
class="card-body m-2 collapse"
v-bind:id="'testlist' + item.id"
:class="[getCollapseState('testlist' + item.id) ? 'show' : '']"
>
//スクリプト
getCollapseState(blockid){
if (localStorage.getItem(blockid) === null || localStorage.getItem(blockid)=='true')
return true;
return false;
},
saveCollapseState(blockid, event){
//初回falseだと何故かnullになる
//反転して保存
if (event.currentTarget.getAttribute('aria-expanded') === null || event.currentTarget.getAttribute('aria-expanded')=='false')
localStorage.setItem(blockid, true);
else
localStorage.setItem(blockid, false);
},
