vue.js - Vue composition api 没有将绑定(bind)值更新到文本字段

Question

我正在初始化后更新对象的属性。

我简化的组件如下所示:

<template lang="pug">
  div
    v-text-field(v-model="object.name")
    v-text-field(v-model="object.vpnPort")
</template>

<script>
import { ref } from '@vue/composition-api'
export default {
  setup(props, { root }) {
    const object = ref({})

    getNextPort().then(response => (object.value.vpnPort = response.data))

    return { object }
  }
}
</script>

在此示例中，getNextPort 是一个返回数字的 API 调用。由于某种原因，v-text-field 没有更新。我没有在输入字段中看到值。当我 console.log getNextPort 调用后的对象时，它显示:

{"vpnPort":10001}

这是预期的结果。我也试过:

• $nextTick
• onMounted
• $forceUpdate

但是当我开始在名称字段中输入时，vpnPort 会更新!

有人知道为什么结果没有显示在 v-text-field 中吗？

Answer 1

您应该使用空字段初始化您的对象数据，例如:

const object = ref({
  name:'',
  vpnPort:null
 })