Vue3模型最初在保存代码后更新,而不是在浏览器刷新后更新

zzlelutf  于 2023-01-05  发布在  Vue.js
关注(0)|答案(1)|浏览(205)

我遇到了一个量子问题。我有一些代码(如下所示)没有显示数据模型的值。所以我放了一个console.log进去看看发生了什么,然后它工作了......其他代码没有任何变化,但是通过查看它,它是存在的。然后如果我刷新页面,它又消失了
[更新]这不是console.log本身(哇--那会很奇怪)。这是我改变文件时的状态与我加载新的浏览器时的状态。我应该看看有什么不同吗?我是VueJS的新手,而且我真的更像是一个python /后端开发人员,所以如果这是基本的东西,对不起。
子组件中的模板编码

<v-text-field v-else
                @change="updateValue(field.name, $event)"
                persistent-placeholder
                :model-value="(item as any)[field.name]"
                :label="field.title || field.name"
              ></v-text-field>

项作为Model传入,并按如下方式转换

props: {
    input: {
      type: Object || null,
      default: null
    },
  },
  data() {
    return {
      item: {...this.input},
    }
  },

来自于父母

<ModelComponentVue 
      :input="item"
    />

获取created()中的数据

DataStore.query(User).then((items:Array<User>) => {
  if (items.length > 0) {
    this.item = items[0] // I suspect this could be not responding to reactivity in Vue3 ???
  }
})
k10s72fa

k10s72fa1#

部分代码只使用了initialData,这与您的想法相反。请注意下面的代码。

data() {
    return {
      item: {...this.input},
    }
  },

在上面的代码中,你将只有输入的初始值,而会丢失其他的值。使用 prop 最简单的方法是直接使用它们。
但是,对于更复杂的概念,可以使用computed或toRef等。
尝试下面的代码
x一个一个一个一个x一个一个二个x

相关问题