lodashを使用したシャッフルボタンの実装

参考記事:https://www.youtube.com/watch?v=S0b1ZBIooyY&list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW&index=7

lodash：https://lodash.com/
（lodashはシャッフルを簡単にするために使用している。）

前回学んだ配列をv-forで表示させるものの続き
前回記事
Vue.js v-forの使い方　配列とオブジェクト比較

ボタンを押すと配列の並びが変化するようにした。
コード


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flip-list-move{
            /* このflip-listはtransition-groupのname属性を差す。-moveはここが動いた時にこのcssを着火させるという意味 */
            transition:transform .5s;
        }
    </style>
</head>
<body>
    <h1>Vueの練習:v-for</h1>

<!-- オブジェクトの配列のv-for -->
<div id="app2">
    <button v-on:click='shuffle'>シャッフル</button>
    <transition-group name='flip-list' tag='ul'>
        <!-- transition-groupタグで囲う時はtagで指定したulタグの開始タグは不要 -->
        <li v-for='item in items' v-bind:key='item.name'>{{item.name}}</li>
        <!-- transition-groupをかける為にv-bind:keyの設定が必要 -->
        <!-- v-bind:key は :keyに省略も可能 -->
    </transition-group>        
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
<script>

// オブジェクトの配列のv-for
new Vue({
    el:'#app2',
    data:{
        items:[
            {name:'北海道'},
            {name:'青森県'},
            {name:'岩手県'},
            {name:'宮城県'},
            {name:'秋田県'},
            {name:'山形県'}
            ]
    },
    methods: {
        shuffle:function(){
            this.items = _.shuffle(this.items);//「_.」はlodashを使うときの宣言。参考:https://lodash.com/
        }
    },
})


</script>
</body>
</html>

結果

これが
ボタンを押すと

このように順番が変わる

ポイント


 <transition-group name='flip-list' tag='ul'>
        <li v-for='item in items' v-bind:key='item.name'>{{item.name}}</li>
 </transition-group>

transition-groupで前回書いていたulタグを囲む
この時、ulの開始タグを消し、transition-groupの開始タグ内でtag='ul'を設定する点注意

属性keyの扱い

v-bind:keyを設定することでシャッフルする対象を指定している。
この辺りの扱いがまだ理解できていない。
公式ドキュメントを貼っておく。今後理解できるようにしたい。
https://jp.vuejs.org/v2/api/#key

その他ポイントはコード内のコメントに記載