Vue组合api没有更新文本字段的绑定值答案

【问题标题】：Vue composition api is not updating bound value to text fieldVue组合api没有更新文本字段的绑定值
【发布时间】：2020-09-24 15:07:00
【问题描述】：

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

我的简化组件如下所示：

<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.loggetNextPort调用后的对象显示：

{"vpnPort":10001}

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

$nextTick
onMounted
$forceUpdate

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

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

【问题讨论】：

标签： vue.js vue-component vuetify.js vuejs3 vue-composition-api

【解决方案1】：

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

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

【讨论】：

【解决方案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了解更多信息

【讨论】：