Vuetify 和 Firestore 的动态下拉选项

Question

我正在使用 nuxt、vuetify 和 firebase（用于数据库的 cloud firestore）来构建承包商的数据库应用程序。承包商在填写表格时将有多种工作范围 (SOW) 和专业可供选择。

对于 1 个工作范围，会有多种专业选择。因此，每当用户在第一个选择选项上选择 SOW 时，在与该特定 SOW 相关的第二个选择选项上将只有有限数量的专业化可供选择。选择专业后，第三个选择选项将自动显示分配给该专业的代码。 SOW 和专业的所有数据均来自 firestore 数据库。

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

我已经提到了https://jsfiddle.net/mani04/Lgxrcc5p/，但无法真正找到解决方案。有没有办法做到这一点？

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

谢谢！

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

Answer 1

我把我的答案放在这里，以防有人和我有同样的问题。是的，使用观察者解决了这个问题。

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

我是这样做的：

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>

1. 我的脚本部分

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

谢谢:))