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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1415閲覧

vue.jsで配列をシャッフルして表示

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/31 03:34

vue.jsで配列をシャッフルして表示する方法についての質問です。

ドットインストールのJavaScript講座で紹介されていた三択クイズをVue.jsで実装しようとしています。
正誤判定をするときに、プログラム側で用意した答えの配列の0番目の要素を正解にするという仕様になっています。

同じようなことを実現しようとした時に、Vue.jsでは以下のようなコードで実現できました。

本当はquizSetだけを使ってシャッフルして表示をしたかったのですが、quizSetを書き換えてしまうと、配列の0番目を答えにしたいので答えも変わってしまいます。そのため、シャッフル用にquizSet_shuffleを用意して実装しました。

もっといい実装方法はありますでしょうか?

HTML

1 2<body> 3 <section id='app'> 4 <ul v-on:click="select" v-bind:class="shuffle()"> 5 <li 6 v-for="(answer,index) in quizSet_shuffle[currentNum].a" > 7 {{ answer }} 8 </li> 9 </ul> 10 <div class="btn" v-on:click="next">next</div> 11 </section> 12 13 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 14 <script> 15 16 (function () { 17 'use strict'; 18 19 var vm = new Vue({ 20 el: '#app', 21 data() { 22 return { 23 quizSet: [ 24 { q: 'q1', a: ['a1', 'a2', 'a3'] }, //正解はa1 25 { q: 'q2', a: ['b1', 'b2', 'b3'] }, //正解はb1 26 ], 27 quizSet_shuffle: [ 28 { q: 'q1', a: ['a1', 'a2', 'a3'] }, 29 { q: 'q2', a: ['b1', 'b2', 'b3'] }, 30 ], 31 currentNum: 0, 32 } 33 }, 34 methods: { 35 36 shuffle() { 37 for (let i = this.quizSet[this.currentNum].a.length - 1; i > 0; i--) { 38 const j = Math.floor(Math.random() * (i + 1)); 39 [this.quizSet_shuffle[this.currentNum].a[j], this.quizSet_shuffle[this.currentNum].a[i]] = [this.quizSet_shuffle[this.currentNum].a[i], this.quizSet_shuffle 40 [this.currentNum].a[j]]; 41 console.log('shuffle called'); 42 console.log(this.quizSet_shuffle[this.currentNum].a); 43 } 44 }, 45 46 select(e) { 47 console.log("select clicked"); 48 const clickedIndexNum=[...e.currentTarget.children].indexOf(e.target); 49 console.log(clickedIndexNum); 50 51 if (this.quizSet_shuffle[this.currentNum].a[clickedIndexNum] === this.quizSet[this.currentNum].a[0] ){ 52 console.log("right"); 53 }else{ 54 console.log("wrong"); 55 } 56 57 }, 58 next(e) { 59 console.log("next clicked") 60 this.currentNum++; 61 } 62 }, 63 }); 64 })(); 65 </script> 66</body> 67 68 69

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問