回答編集履歴
4
source追加
test
CHANGED
|
@@ -36,4 +36,32 @@
|
|
|
36
36
|
|
|
37
37
|
最後にコピーするのが手っ取り早いと思います。
|
|
38
38
|
|
|
39
|
+
```javascript
|
|
40
|
+
|
|
41
|
+
methods: {
|
|
42
|
+
|
|
43
|
+
goShuffle() {
|
|
44
|
+
|
|
45
|
+
console.log("実行されているかの確認")
|
|
46
|
+
|
|
47
|
+
for (var i = this.list.length - 1; i >= 0; i--) {
|
|
48
|
+
|
|
49
|
+
// 0~iのランダムな数値を取得
|
|
50
|
+
|
|
51
|
+
var rand = Math.floor( Math.random() * ( i + 1 ) );
|
|
52
|
+
|
|
53
|
+
// 配列の数値を入れ替える
|
|
54
|
+
|
|
39
|
-
this.list = [
|
|
55
|
+
[this.list[i], this.list[rand]] = [this.list[rand], this.list[i]]
|
|
56
|
+
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
this.list = [].concat(this.list); // もしくは this.list = [...this.list];
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
```
|
3
typo
test
CHANGED
|
File without changes
|
2
typo
test
CHANGED
|
@@ -34,6 +34,6 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
最後にコピー
|
|
37
|
+
最後にコピーするのが手っ取り早いと思います。
|
|
38
38
|
|
|
39
39
|
this.list = [...this.this.list]
|
1
2個質問があったので修正
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
### goShuffleが定義されていないとエラーが出てしまう
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
> goShuffle()
|
|
2
6
|
|
|
3
7
|
|
|
@@ -5,3 +9,31 @@
|
|
|
5
9
|
thisが抜けているため、グローバルにgoShuffle関数を探しに行くも見つからずエラーになっています。
|
|
6
10
|
|
|
7
11
|
this.goShuffle()としてください。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### 配列をランダムに並び替える
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
> [this.list[i], this.list[rand]] = [this.list[rand], this.list[i]]
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
通常これで配列は入れ替わります。
|
|
24
|
+
|
|
25
|
+
しかしながら、Vueは配列の添字による変更を検知できません。
|
|
26
|
+
|
|
27
|
+
そのため、listの状態と描画の状態が一致しない状態になります。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
詳しくは[配列の変化を検出](https://jp.vuejs.org/v2/guide/list.html#%E9%85%8D%E5%88%97%E3%81%AE%E5%A4%89%E5%8C%96%E3%82%92%E6%A4%9C%E5%87%BA)読んでください。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
最後にコピーを値するのが手っ取り早いと思います。
|
|
38
|
+
|
|
39
|
+
this.list = [...this.this.list]
|