質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

2回答

614閲覧

メソッドが実行されない

span

総合スコア32

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2019/02/05 04:42

編集2019/02/05 04:47

下記実行すると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})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/02/05 04:44

コードはマークダウンボタン (<code>ってやつです)を押したらでてくる ```ここに言語を入力 コード ``` ↑の枠の中のコードという文言を消して貼りつけてください。 「ここに言語を入力」という文字を消してJavaScriptなのかHTMLなのか記述してください
span

2019/02/05 04:47

申しわけありません修正いたしました。ご助言ありがとうございますm
guest

回答2

0

ベストアンサー

goShuffleが定義されていないとエラーが出てしまう

goShuffle()

thisが抜けているため、グローバルにgoShuffle関数を探しに行くも見つからずエラーになっています。
this.goShuffle()としてください。

配列をランダムに並び替える

[this.list[i], this.list[rand]] = [this.list[rand], this.list[i]]

通常これで配列は入れ替わります。
しかしながら、Vueは配列の添字による変更を検知できません。
そのため、listの状態と描画の状態が一致しない状態になります。

詳しくは配列の変化を検出読んでください。

最後にコピーするのが手っ取り早いと思います。

javascript

1 methods: { 2 goShuffle() { 3 console.log("実行されているかの確認") 4 for (var i = this.list.length - 1; i >= 0; i--) { 5 // 0~iのランダムな数値を取得 6 var rand = Math.floor( Math.random() * ( i + 1 ) ); 7 // 配列の数値を入れ替える 8 [this.list[i], this.list[rand]] = [this.list[rand], this.list[i]] 9 } 10 11 this.list = [].concat(this.list); // もしくは this.list = [...this.list]; 12 } 13 },

投稿2019/02/05 04:55

編集2019/02/05 07:21
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

span

2019/02/05 07:02

いただいたリンク読ませていただき動作しない原因は理解しVue.set()で書き換えるのが正解なのかな?と解釈したのですがいまいち [this.list[i], this.list[rand]] = [this.list[rand], this.list[i]] を Vue.set() で書き換える記述方法がわかりませんでした。。 最後にコピーが手っ取り早く良いとのことでしたが this.list = [...this.this.list] の意味も理解しきれませんでしたm 初歩的なことで大変申し訳ないのですがこちらご教授いただけますでしょうか。。
退会済みユーザー

退会済みユーザー

2019/02/05 07:23

ソースを追記しました。 [...this.this.list] の意味がわかってないようなので、古い書き方に直しました。
退会済みユーザー

退会済みユーザー

2019/02/05 07:25 編集

Vue.setは使いません。Vue.setは後からobservableなプロパティを追加するためのものです。
span

2019/02/05 08:15

ご回答ありがとうございます。this.list = [...this.list]の意味がわかっておらずお手数おかけいたしました。この場合.concatを使用するのが正しいのですねありがとうございます。動作としてしても意図した通りのものとなりました。
guest

0

var app = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, methods: { goShuffle() { console.log("実行されているかの確認") for (var i = this.list.length - 1; i >= 0; i--) { // 0~iのランダムな数値を取得 var rand = Math.floor( Math.random() * ( i + 1 ) ); // 配列の数値を入れ替える [this.list[i], this.list[rand]] = [this.list[rand], this.list[i]] } } }, created: function() { goShuffle() } })

こうしてもダメですか?

投稿2019/02/05 04:54

fukumi822

総合スコア228

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

span

2019/02/05 07:03

ご回答ありがとうございます。こちらはthis.goShuffle()と記述するべきでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問