基于Vuetify与Firestore实现动态三级联动下拉选项的问题求助

核心问题排查&可运行实现方案 #

你现有代码的核心问题如下：

• data中重复定义editedItem、editedIndex，后定义的会覆盖前者，导致第一个下拉框的v-model绑定失效
• 下拉框错误使用@click事件触发数据加载，应该监听@change选中值变化事件实现联动，且不需要每次点击都重复请求Firestore，页面初始化时预加载全量数据后本地过滤即可
• 第二、第三个下拉框的items绑定的是全量专精数据，没有做关联过滤，自然不会跟随上级选中值变化
• 错误将方法名listofspecialization作为变量判断禁用状态，且缺少过滤后的专精列表存储变量

第一步：调整模板代码

<v-col cols="12" sm="6" md="5">
  <v-select
    :items="scopeList"
    item-text="scope"
    item-value="scope"
    v-model="editedItem.scope"
    label="工作范围(SOW)"
    @change="handleScopeChange"
  ></v-select>
</v-col>
<v-col cols="12" sm="6" md="5">
  <v-select
    :items="filteredSpecialList"
    item-text="specialization"
    item-value="specialization"
    v-model="editedItem.specialization"
    :disabled="!editedItem.scope"
    label="专精领域"
    @change="handleSpecialChange"
  ></v-select>
</v-col>
<v-col cols="12" sm="6" md="5">
  <v-select
    :items="codeList"
    item-text="code"
    item-value="code"
    v-model="editedItem.code"
    :disabled="!editedItem.specialization"
    label="对应编码"
  ></v-select>
</v-col>

第二步：调整script逻辑

首先修正data定义，新增联动需要的变量，页面初始化时预加载全量数据：

data: () => ({
  editedIndex: -1,
  // 合并editedItem，不要拆分定义
  editedItem: {
    scope: '',
    specialization: '',
    code: '',
  },
  defaultItem: {
    scope: '',
    specialization: '',
    code: '',
  },
  // 全量数据存储
  scopeList: [],
  allSpecialList: [],
  // 联动过滤后的数据
  filteredSpecialList: [],
  codeList: []
}),
// 页面初始化就加载全量数据，不用点击才加载
mounted() {
  this.loadAllScope()
  this.loadAllSpecial()
},
methods: {
  // 加载全量工作范围
  loadAllScope() {
    db.collection('Scope of Works')
      .get()
      .then(querySnapshot => {
        this.scopeList = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }))
      })
  },
  // 加载全量专精+编码数据
  loadAllSpecial() {
    db.collectionGroup("Specialization")
      .get()
      .then(querySnapshot => {
        this.allSpecialList = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }))
      })
  },
  // 工作范围选中变化时，过滤对应专精列表
  handleScopeChange() {
    // 清空下级已选值
    this.editedItem.specialization = ''
    this.editedItem.code = ''
    this.codeList = []
    // 过滤出属于当前选中SOW的专精领域，注意此处的scope字段要和你Specialization集合中关联SOW的字段名保持一致
    this.filteredSpecialList = this.allSpecialList.filter(item => item.scope === this.editedItem.scope)
  },
  // 专精领域选中变化时，过滤对应编码
  handleSpecialChange() {
    this.editedItem.code = ''
    // 过滤出当前选中专精对应的编码
    this.codeList = this.allSpecialList
      .filter(item => item.specialization === this.editedItem.specialization && item.scope === this.editedItem.scope)
      .map(item => item.code)
  }
}

注意事项

• 请确认你的Specialization集合的每条数据中都有对应关联的scope字段，用来和工作范围做关联匹配，如果字段名和示例不一样，替换过滤逻辑中的字段名即可
• 如果要支持多选SOW，只需要给第一个v-select加multiple属性，同时把handleScopeChange里的过滤逻辑改成item => this.editedItem.scope.includes(item.scope)即可
• 三级选完之后editedItem里就同时有SOW、专精、编码三个值，可以直接提交到Firestore

内容的提问来源于stack exchange，提问作者user16136444