Naive UI 的 Cascader 为什么选不了值？

司徒司卿提问于 2026-03-02 19:32:23 阅读 35

组件

我用 Naive UI 的 Cascader 组件，数据是动态从接口拉的，但点开下拉选项后，点击任何一项都没反应，值也没变。控制台也没报错。

我试过把 options 写死，那样是可以选的，但一换成异步数据就不行了。是不是响应式的问题？我的 options 是用 ref 包着的：

const options = ref([])

onMounted(async () => {
  const res = await fetchOptions()
  options.value = res // 格式和文档示例一样，有 label/value/children
})

模板里就是最简单的用法：<n-cascader v-model:value="value" :options="options" />，但就是选不中……

Naive UI

我来解答赞 7 收藏

反馈

2 条解答

设计师世英 Lv1

一般这样处理，看起来问题是出在数据加载的时机上。虽然你在 onMounted 里更新了 options，但是可能在组件初始化时，options 还是个空数组，导致 Cascader 组件没有正确渲染选项。你可以尝试用 watch 监听 options 的变化，确保在数据准备好后再渲染 Cascader。

可以试试这样改：

const options = ref([])

const value = ref(null) // 确保 value 也是响应式的



onMounted(async () => {

  const res = await fetchOptions()

  options.value = res

})



watch(options, (newOptions) => {

  if (newOptions.length > 0 && !value.value) {

    // 初始化 value，或者根据需要设置默认值

    value.value = newOptions[0].value

  }

})

模板部分保持不变：

<n-cascader v-model:value="value" :options="options" />

这样能确保在 options 更新后，Cascader 能够正确响应用户的操作。希望这能解决问题，有时候这种坑真是挺烦人的。

2026-03-20 23:04

Zz永伟 Lv1

这个问题我之前也踩过坑，折腾了半天才发现是 value 的初始值类型不对。

你的 value 是怎么定义的？是不是写成了 const value = ref(null) 或者 const value = ref('')？

Naive UI 的 Cascader 要求 value 必须是数组类型，即使没有默认值也要初始化成空数组：

const value = ref([])  // 必须是数组，不能是 null 或空字符串

因为 Cascader 选中的值是路径数组，比如选中"广东省-广州市"，value 会变成 ['guangdong', 'guangzhou']。如果初始值不是数组，组件内部做 push 或者遍历操作的时候就会出问题，但不会报错，就是点不动。

另外再检查一下你的异步数据格式，确保每个节点都有 label 和 value 字段，而且 value 不能重复。如果你的接口返回的字段名不一样，比如叫 name 和 id，那需要手动映射一下，或者用 label-field 和 value-field 属性指定：


  v-model:value="value" 

  :options="options"

  label-field="name"

  value-field="id"

/>

我当时就是卡在初始值类型上，写死数据的时候顺手写对了，异步加载的时候反而写错了，排查了半天。你看看是不是这个问题。

2026-03-02 20:02