为什么input值传递获取不到Promise的值?

我的诉求:在input框展示调接口返回的String,目前做法:

 const convert = () => {
        const ps = { modelValue: inputRef.modelValue}
        return Ajax.doConvert(ps).then(apiRes => apiRes.data)
      }

以上接口返回测试通过,已经返回了正确的String值,然而通过:value值传递到input组件,却无法取到对应返回值,报错Invalid prop: type check failed for prop “value”. Expected String, Number, got Promise,写法如下:

<Input :value='convert()' style='width: 200px; margin-left: 5px' />

input传值取到的仍是Promise而不是需要的String,input框显示“[object Promise]”,请问怎么修改? 谢谢

是什么给了你 Vue 可以自动 then 一个 Promise 的错觉。

const convertResult = ref()

async function convert () {
  const ps = {modelValue: inputRef.modelValue}
  convertResult.value = await Ajax.doConvert(ps).then(apiRes => apiRes.data)
}
<Input :value="convertResult" style="..." />
3 Likes

问题是之前请求返回是对的,感觉是input里取值方式不对,这样改发不出请求了。。

你的用法很奇怪,一般 Input 都会双向绑定一个响应式的值,使用异步获取的结果赋值给响应式的值。

1 Like

你可能想错方向了。

v-bind:value="convert()" 的意思是,把 convert 这个函数的返回值作为 value 的值。但它的返回值是什么?是一个 Promise。

你实际需要做的是在组件之外获取这个 Promise 的 resolved value,然后把这个 value 注入给组件。

1 Like

没毛病,理解了! :grinning: :grinning: :grinning: