(Vue.js) Firestoreに登録するデータの型を宣言するファイルを作りたい
Qiita初質問です。質問の不備についてはご容赦ください。
プログラミング初心者なので、その点を踏まえて回答していただけると大変ありがたいです。
解決したいこと
Vue.js, Firestore, Firebase AuthでSPAを作成しています。
ログイン認証→プロフィール設定→プロフィール情報をFirestoreに格納 まで完成しており、次にFirestore上を検索する機能を作る段階です。
そこで、特定フィールドの値が含まれているかどうかを検索する際にチェックボックスで指定するのですが、この特定フィールドの値の種類を外部ファイルにしたいです。
例えば好きなスポーツというフィールドがあって、
☑野球 ☑サッカー ☑テニス ☑バスケットボール
という4項目で検索できるとします。
この項目は、ユーザーがプロフィール情報を登録する場合と検索する場合の2つのコンポーネントで共通しているので、外部ファイルから読み込みたいです。
この場合、どう外部化すればよいでしょうか。
以下に、プロフィール情報をFirestoreに設定するコンポーネントのソースを掲載します。
このinputの羅列をやめて外部ファイルから読み込んだプロフィール項目をv-for等で回し、検索フィードも同様にv-for等で回してチェックボックスを生成したいです。
該当するソースコード
<template>
<div class="signup">
<h2>Edit Profile</h2>
<p>
<label><input type="text" v-model="sex" placeholder="sex">sex</label><br/>
<label><input type="text" v-model="name" placeholder="name">name</label><br/>
<label><input type="radio" v-model="isTeacher" v-bind:value="true">Teacher</label>
<label><input type="radio" v-model="isTeacher" v-bind:value="false">Student</label><br/>
<label><input type="checkbox" v-model="category.hs" placeholder="hs">High</label>
<label><input type="checkbox" v-model="category.jhs" placeholder="jhs">JuniorHigh</label>
<label><input type="checkbox" v-model="category.js" placeholder="js">Junior</label><br/>
<label><input type="checkbox" v-model="subject.math" placeholder="math">math</label>
<label><input type="checkbox" v-model="subject.english" placeholder="english">english</label>
<label><input type="checkbox" v-model="subject.japanese" placeholder="japanese">japanese</label><br/>
<label><input type="text" v-model="char" placeholder="char">char</label><br/>
<button @click="send_edit()">Edit</button>
</p>
</div>
</template>
<script>
import { getFirestore, doc, setDoc } from "firebase/firestore"
import { getAuth } from "firebase/auth"
export default {
name: 'Edit_profile',
data () {
return {
id: '',
name: '',
sex: '',
isTeacher: false,
category: {
hs: false,
jhs: false,
js: false
},
subject: {
math: false,
english: false,
japanese: false
},
char: ''
}
},
mounted() {
},
methods: {
async send_edit() {
const uid = getAuth().currentUser.uid;
this.id = uid;
const docRef = doc(getFirestore(), "users", uid);
await setDoc(docRef, this.$data, { merge: true });
this.$emit('updateData');
}
}
}
</script>
自分で試したこと
どう書けばよいのか分からず手つかずです。
0