BootstrapVue根据父组件传入ID匹配嵌套JSON实现下拉选择联动

实现思路 #

• 用计算属性自动响应父组件传入的ID变化，匹配JSON中对应ID的条目
• 把匹配到的条目下的Product对象转为数组，处理成b-form-select需要的选项格式（显示字段为Articel，值字段为Rank）
• 给下拉框绑定选中值，选中时直接将对应Rank值emit给父组件

完整实现代码 #

<template>
  <b-card>
    <div class="mt-2">CLOTHING ITEM</div>
    <b-form-select
      v-model="selectedRank"
      :options="articleOptions"
      placeholder="请选择商品"
      @input="handleSelect"
    ></b-form-select>
  </b-card>
</template> 

<script>
import IDJson from './json/ID.json'

export default {
  name: "customerChoice",
  data() {
    return {
      selectedRank: '', // 存储选中的Rank值
      jsonData: IDJson
    }
  },
  props: ["ID"],
  computed: {
    // 自动匹配对应ID的JSON条目
    matchedItem() {
      return this.jsonData.find(item => item.ID === this.ID) || {}
    },
    // 自动生成下拉框选项
    articleOptions() {
      if (!this.matchedItem.Product) return []
      // 把嵌套的Product对象转为数组，适配组件要求的选项格式
      return Object.values(this.matchedItem.Product).map(product => ({
        text: product.Articel,
        value: product.Rank
      }))
    }
  },
  methods: {
    handleSelect() {
      // 向父组件传递选中的Rank值，父组件通过@get-rank事件接收
      this.$emit('get-rank', this.selectedRank)
    }
  }
}
</script>

父组件调用示例 #

<!-- 父组件模板中调用子组件的写法 -->
<customer-choice :ID="父组件选中的ID变量" @get-rank="父组件接收Rank的方法" />

注意：如果父组件传入的ID是数字类型，需要在匹配时做类型转换，把find的条件改成item.ID === String(this.ID)，避免因类型不一致匹配失败。

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