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

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

组件

我用 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

我来解答赞 2 收藏

反馈

1 条解答

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