Vue.jsを使ってリストをシャッフルする方法

HTML

<div id=”app”>
<button v-on:click=”shuffle”>シャッフル</button>
<transition-group name=”flip-list” tag=”ul”>
<li v-for=”pref in prefs” v-bind:key=”pref.name”>
{{ pref.name }}
</li>
</ul>
</div>

JavaScript

var app = new Vue({
el: “#app”,
data:{
prefs:[
{name: ‘北海道’},
{name: ‘青森県’},
{name: ‘岩手県’},
{name: ‘秋田県’},
{name: ‘山形県’},
{name: ‘福島県’},
]
},
methods: {
shuffle: function(){
// lodashというライブラリを使用
this.prefs = _.shuffle(this.prefs);
}
}
});

lodashというライブラリの使用は下記のように書き込んで取り込んでいます

＜script src=”https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js”＞＜/script＞

こちらが今回勉強させてもらった、ともすたさんの動画です。