带有Vutify和FiRestore的动态下拉选项 [英] Dynamic dropdown options with Vuetify and Firestore

问题描述

我正在使用nuxt、vutify和Firebase(数据库的云Firestore)来构建承包商的数据库应用程序。承包商在填写表格时将有多种工作范围(SOW)和amp；专业可供选择。

对于1个工作范围，将有多个专业化选择。因此，每当用户在第一个选择选项上选择SOW时，在与该特定SOW相关的第二个选择选项上只能选择有限数量的专业化认证。选择专业化认证后，第三个选择选项将自动显示分配给该专业化认证的代码。SOWS&；专业化认证的所有数据均从FireStore数据库获取。

对于所有3个选项，我从FireStore加载数据都没有问题。只是它没有按照我想要的方式进行动态下拉。

我已经提到https://jsfiddle.net/mani04/Lgxrcc5p/，但无法真正解决问题。有办法做到这一点吗？

此处选择的3个选项的图像：After select scope, nothing happen on the 2nd select

谢谢！

这是我使用vutify 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)
        })

推荐答案

我将答案放在此处，以防有人对我有同样的问题。是的，使用观察器解决了问题。

现在，每当我选择一个范围时，都会列出有限的专业化认证选项。然后，当我选择某个专业化认证时，它将自动显示分配给该特定专业化认证的代码。

我是这样做的：

1. 我的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>

2. 我的脚本部分

        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());
                        });
                    });
                }
            }
        },

谢谢：)

这篇关于带有Vutify和FiRestore的动态下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！