Firestore Sort/Filter

• Perform simple and compound queries in Cloud Firestore

import { collection, query, where } from "firebase/firestore";
const citiesRef = collection(db, "cities");

const q = query(citiesRef, where("capital", "==", true));

• Order and limit data with Cloud Firestore

import { query, orderBy, limit } from "firebase/firestore";  

const q = query(citiesRef, orderBy("name"), limit(3));

我們來試著在題目中新增Unit(單元)欄位

參考上面的範例，我們把/src/components/EnglishDB.vue改為:

import { collection, getDocs, getFirestore, **where, query** } from "firebase/firestore";

const examCollection = collection(db, "English");
const queryExam = query(examCollection, where("unit", "==", 1));
const querySnapshot = await getDocs(queryExam);

這樣就可以取得unit等於「1」的內容了

如果是要依據unit排序，把where()改成orderBy():

import { collection, getDocs, getFirestore, **query, orderBy** } from "firebase/firestore";

const examCollection = collection(db, "English");
const queryExam = query(examCollection, orderBy("unit"));
const querySnapshot = await getDocs(queryExam);

<aside> 💡 記得要import相關函數 (query, where, orderBy)

</aside>

如何列出同一單元的所有題目?

目前我們都是每次只呈現一題，如果我們要同時呈現所有題目，就可以利用v-for將所有題目列出: