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

中文
#1

我的诉求：在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]”，请问怎么修改? 谢谢

#2

是什么给了你 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
#4

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

#5

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

1 Like
#6

你可能想错方向了。

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

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

1 Like
#7

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