下記実行するとgoShuffleが定義されていないとエラーが出てしまうのですがなぜなのでしょうか?メソッドの読み込みの前にcreatedが実行されていることが原因なのかな?と思っているのですがcreatedの段階でメソッドを実行するためにはどうすれば良いでしょうか?
また切り替えボタンを押した際に都度配列の中身をランダムに並び替えたいのですがこちらも反応してくれません。都度配列をランダムに並び替えるためにはどうすれば良いのか?初歩的な事で申しわけありませんがご教授願います。
HTML
1<div id="app"> 2 <my-list v-on:event="goShuffle" v-for="item in list" v-bind:num="item" v-bind:key="item"></my-list> 3</div>
js
1Vue.component('my-list', { 2 template: '<li>{{num}}<button v-on:click="event">切り替え</button></li>', 3 props: { 4 num: Number 5 }, 6 methods: { 7 event() { 8 this.$emit('event') 9 } 10 } 11}) 12 13var app = new Vue({ 14 el: '#app', 15 data: { 16 list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 17 }, 18 created: function() { 19 goShuffle() 20 }, 21 methods: { 22 goShuffle() { 23 console.log("実行されているかの確認") 24 for (var i = this.list.length - 1; i >= 0; i--) { 25 // 0~iのランダムな数値を取得 26 var rand = Math.floor( Math.random() * ( i + 1 ) ); 27 // 配列の数値を入れ替える 28 [this.list[i], this.list[rand]] = [this.list[rand], this.list[i]] 29 } 30 } 31 } 32})
回答2件
あなたの回答
tips
プレビュー