vue.js - 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 调用。由于某种原因，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了解更多信息