Vue 组合 api 未将绑定值更新到文本字段

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 调用 returns 一个数字。由于某种原因，v-text-field 未更新。我没有在输入字段中看到值。当我 console.log getNextPort 调用后的对象时，它显示：

{"vpnPort":10001}

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

$nextTick
onMounted
$forceUpdate

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

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

Answer 1

您应该使用空字段初始化您的 object 数据，例如：

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

Answer 2

对于反应对象，你应该使用reactive

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

改变

object.value.vpnPort = response.data

到

object.vpnPort = response.data

查看https://composition-api.vuejs.org/#ref-vs-reactive了解更多信息

Vue 组合 api 未将绑定值更新到文本字段

Vue composition api is not updating bound value to text field

vue.js

vue-component

vuetify.js

vuejs3

vue-composition-api