Api композиции Vue не обновляет привязанное значение к текстовому полю

Я обновляю атрибут объекта после инициализации.

Мой упрощенный компонент выглядит так:

<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?


vue.js vuetify.js vuejs3 vue-component vue-composition-api
person Jessie Liauw A Fong    schedule 05.06.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны инициализировать свои object данные пустыми полями, например:

const object = ref({
  name:'',
  vpnPort:null
 })
person Boussadjra Brahim    schedule 05.06.2020

arrow_upward
0
arrow_downward

для реактивных объектов следует использовать reactive

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

изменение

object.value.vpnPort = response.data

to

object.vpnPort = response.data

ознакомьтесь с https://composition-api.vuejs.org/#ref-vs-reactive для получения дополнительной информации

person caseyjoneal    schedule 10.06.2020