javascript - Vuetify 和 Firestore 的动态下拉选项
问题描述
我正在使用 nuxt、vuetify 和 firebase(用于数据库的 cloud firestore)来构建承包商的数据库应用程序。承包商在填写表格时将有多种工作范围 (SOW) 和专业可供选择。
对于1个工作范围,会有多种专业选择。因此,每当用户在第一个选择选项上选择 SOW 时,在与该特定 SOW 相关的第二个选择选项上将只有有限数量的专业化可供选择。选择专业后,第三个选择选项将自动显示分配给该专业的代码。SOW 和专业的所有数据均来自 firestore 数据库。
对于所有 3 个选项,我可以从 firestore 加载数据。只是它没有按照我想要的方式进行动态下拉。
我已经提到了https://jsfiddle.net/mani04/Lgxrcc5p/但无法真正找到解决方案。有没有办法做到这一点?
此处 3 个选择选项的图像:选择范围后,第二次选择没有任何反应
谢谢!
这是我使用 vuetify v-select 的模板代码
<v-col cols="12" sm="6" md="5">
<v-select
:items="scope"
item-text="scope"
v-model="editedItem.scope"
label="Scope"
@click="listofscope"
></v-select>
</v-col>
<v-col cols="12" sm="6" md="5">
<v-select
:items="special"
item-text="specialization"
v-model="editedItem.specialization"
:disabled="listofspecialization.length == 0"
label="Specialization"
@click="listofspecialization"
></v-select>
</v-col>
<v-col cols="12" sm="6" md="5">
<v-select
:items="special"
item-text="code"
v-model="editedItem.code"
:disabled="listofspecialization.length == 0"
label="Code"
@click="listofspecialization"
></v-select>
</v-col>
这是我的脚本部分
data: () => ({
// ..my other codes
scope: [],
editedIndex: -1,
editedItem: {
scope: '',
},
defaultItem: {
scope: '',
},
special: [],
editedIndex: -1,
editedItem: {
specialization: '',
code: '',
},
defaultItem: {
specialization: '',
code: '',
},
)}
listofscope() {
this.scope = []
db
.collection('Scope of Works')
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
this.scope.push({ ...doc.data(), id: doc.id })
})
if (this.listofscope.length > 0) {
this.listofspecialization = [this.scope]
}
console.log(this.scope)
})
},
listofspecialization() {
this.special = []
db
.collectionGroup("Specialization")
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
this.special.push({ ...doc.data(), id: doc.id })
})
if (this.listofspecialization.length > 0) {
this.code = [this.scope][this.specialization]
}
console.log(this.special)
})
解决方案
我把我的答案放在这里,以防有人和我有同样的问题。是的,使用观察者解决了这个问题。
现在,每当我选择一个范围时,都会列出有限的专业选择。然后,当我选择一个专业时,它会自动显示分配给该特定专业的代码。
这是我的做法:
- 我的 HTML 部分:
<v-col cols="12" sm="6" md="5">
<v-select
:items="scopes"
item-text="scope"
v-model="editedItem.scope"
label="Scope"
></v-select>
</v-col>
<v-col cols="12" sm="6" md="5">
<v-select
:items="specializationFiltered"
item-text="specialization"
v-model="editedItem.specialization"
label="Specialization"
return-object
:disabled="specializations.length == 0"
></v-select>
</v-col>
<v-col cols="12" sm="6" md="5">
<v-select
:items="codes"
item-text="code"
v-model="editedItem.specialization.code"
label="Code"
:disabled="true"
></v-select>
</v-col>
- 我的脚本部分
watch: {
"editedItem.scope"(newVal) {
this.specializationFiltered = [];
if (this.editedItem.scope) {
firestore
.collection("Scope of Works")
.doc(this.editedItem.scope)
.collection("Specialization")
.get()
.then(querySnapshot => {
console.log(querySnapshot);
querySnapshot.forEach(doc => {
console.log(doc.data());
this.specializationFiltered.push(doc.data());
});
});
}
}
},
谢谢 :))
推荐阅读
- html - 在窄 DIV 上分层图像
- sql-server - 理解一对多关系
- html - 如何为 Flask 项目中的每个 html 模板正确地拥有不同的 css 文件?
- scheme - 如何在 Scheme 编程中使用带有 lambda 的内置函数过滤器?
- python - 如何在不预先定义行数的情况下创建数据框
- python - 为什么我的输出数据框有两列具有相同的索引?
- python - 如何使用 pandas 将日期表示为字符串的列安全地转换为 unix 时间戳?
- python - 转义 f 字符串中的字符
- php - 捐赠名单 - 代码问题?代码有问题
- java - 在二维数组中搜索最近的索引