Arco Design 的 Input 组件怎么绑定值不生效？

设计师庆芳提问于 2026-03-08 19:54:20 阅读 17

组件

我用 Arco Design 的 Input 组件，想通过 v-model 绑定一个变量，但输入框内容变了，data 里的值却没更新。试了官网的例子，也照着写了，但就是不行。

我的代码是这样的：

<template>
  <a-input v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

Input输入

我来解答赞 2 收藏

反馈

1 条解答

慕容玉聪 Lv1

这问题我熟，之前也被坑过。Arco Design的v-model绑定确实有点小坑，你代码本身没问题，但可能漏了两个关键点：

1. 检查是不是用了Vue2版本但没装v-model插件，如果是Vue3项目要确认Arco版本兼容性
2. 确认你引入的是正确的组件，有时候会不小心引入到Input而不是AInput

给你个完整可用的代码示例，把下面这段替换掉你的试试：

<template>

  <a-input v-model="inputValue" placeholder="随便输入点什么" />

  <p>当前值: {{ inputValue }}</p>

</template>



<script>

import { Input } from '@arco-design/web-vue'

export default {

  components: {

    AInput: Input

  },

  data() {

    return {

      inputValue: ''

    }

  }

}

</script>

如果还不行，八成是版本问题。前端这块经常被版本坑，建议先npm ls @arco-design/web-vue看看版本，然后去他们GitHub的issue区搜搜看有没有类似问题。

2026-03-08 20:02