<aside> 💡 慢慢的，我們將不提供完整程式，大家要去了解這些程式片段到底要放在哪裡~~

</aside>

利用陣列儲存題庫

上週我們學會了利用Vue產生簡單的一個數學四則運算練習，我們來想想看如果是無法利用亂數產生題目的科目，要怎麼處理? 例如，要讓學生練習化學元素表，那要怎麼處理? 請新增一個Chemistry.vue，稍微修改一下內容:

<script setup lang="ts">
import { reactive } from "vue";
let answer = "";
const state = reactive({ message: "" });
function generateQuestion() {
  if ("H" === answer) {
    state.message = "答案正確";
  } else {
    state.message = "答案錯誤";
  }
}
</script>
<template>
  <div>
    氫的化學符號
    <input type="text" v-model="answer" />
    {{ state.message }}
    <button @click="generateQuestion">下一題</button>
  </div>
</template>

App.vue要更改為:

<script setup lang="ts">
import Add from "./components/Add.vue";
**import Chemistry from "./components/Chemistry.vue";**
import { ref } from "vue";
let choice = ref("請選擇");
</script>

<template>
  <div>
    <select v-model="choice">
      <option>請選擇</option>
      <option>Add</option>
      **<option>Chemistry</option>**
    </select>
    **<Chemistry v-if="choice === 'Chemistry'" />**
    <Add v-else />
  </div>
</template>

如果要有很多題呢? 那就可以用到幾乎所有程式語言都會有的一個概念:陣列。甚麼是陣列呢? 就是讓變數裡包含多個值。我們先定義一個陣列，包括多個題目:

let questions = **["氫的化學符號", "氧的化學符號", "氦的化學符號"]**;

一開始，我們預設題目為第一題，在陣列裡，是以0表示第一個值

{{ questions[0] }}

完整程式:

<script setup lang="ts">
import { reactive } from "vue";
let answer = "";
const state = reactive({ message: "" });
let questions = ["氫的化學符號", "氧的化學符號", "氦的化學符號"];
function generateQuestion() {
  if ("H" === answer) {
    state.message = "答案正確";
  } else {
    state.message = "答案錯誤";
  }
}
</script>
<template>
  <div>
    {{ questions[0] }}
    <input type="text" v-model="answer" />
    {{ state.message }}
    <button @click="generateQuestion">點一下</button>
  </div>
</template>

這時候，可以看到第一個題目

按「下一題」時，我們可以利用一個變數currentQuestion儲存目前第幾題，用這樣的方式來更換題目。因為我們直接在template引用currentQuestion，記得要透過reactive()來管理變數。那為何questions不需要透過reactive()來管理? 因為陣列的內容並沒有更動，所以，不需要reactive()。

這時候會發現最後一題之後，會呈現空白。

因為並沒有第四題，如果要停留在最後一題，解決方法是: