如何向v-select传递带参数的函数？及二级联动数据展示问题

代码中的核心问题 #

• 第一个下拉框的dirs数组未初始化，初始状态下无法渲染
• 第二个下拉框误用了vue-select的属性（该组件用:options定义选项，而非:items），且绑定的数据源错误
• getDevices方法仅完成数据过滤，但未将结果赋值给响应式变量，无法触发视图更新
• 联动逻辑绑定错误，应该监听第一个下拉框的选中值来更新第二个的选项

修正后的完整代码 #

<template>
  <div>
    <b-card>
      <b-card-title>Logs</b-card-title>
      <b-row align-v="center">
        <b-col md="2">
          <!-- 第一个下拉框：展示所有dir选项 -->
          <v-select v-model="selectedDir" :options="dirs" placeholder="选择目录" />
        </b-col>
        <b-col md="2">
          <!-- 第二个下拉框：根据选中的dir展示对应devices -->
          <v-select 
            v-model="selectedDevice" 
            :options="currentDevices" 
            placeholder="选择设备" 
            :disabled="!selectedDir"
          />
        </b-col>
      </b-row>
      <b-row>
        <b-button variant="primary" class="mt-1 float-right">Update</b-button>
      </b-row>
    </b-card>
  </div>
</template>

<script>
import { BCard, BCardTitle, BButton, BRow, BCol } from "bootstrap-vue"
import vSelect from "vue-select"

export default {
  components: { BCard, BCardTitle, BButton, BRow, BCol, vSelect },
  data() {
    return {
      logs: null,
      data: [
        { dir: '/var/log/test1', devices: ['a','b','c'] },
        { dir: '/var/log/test2', devices: ['d','e','f'] }
      ],
      dirs: [], // 存储所有目录选项
      selectedDir: null, // 第一个下拉框选中的目录
      selectedDevice: null, // 第二个下拉框选中的设备
      currentDevices: [] // 当前目录对应的设备列表
    }
  },
  created() {
    // 初始化目录选项：从data中提取所有dir值
    this.dirs = this.data.map(item => item.dir)
  },
  watch: {
    // 监听第一个下拉框选中值的变化，更新设备列表
    selectedDir(newDir) {
      if (newDir) {
        // 找到选中目录对应的对象
        const targetItem = this.data.find(item => item.dir === newDir)
        // 更新当前设备列表
        this.currentDevices = targetItem ? targetItem.devices : []
      } else {
        // 未选择目录时清空设备列表
        this.currentDevices = []
      }
    }
  }
};
</script>

关键修改说明 #

1. 初始化目录选项：在created钩子中从data数组提取所有dir值，赋值给dirs，确保第一个下拉框能正常渲染
2. 调整组件属性：第二个v-select使用:options绑定currentDevices（当前目录对应的设备列表），移除不必要的label、item-value等属性
3. 联动逻辑实现：通过watch监听selectedDir的变化，自动查找对应设备列表并更新currentDevices，实现联动效果
4. 优化交互：给第二个下拉框添加:disabled属性，未选择目录时禁用，提升用户体验

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