如何使用从数据库获取的动态数据填充 FormKit 输入字段

Question

我正在使用 vue3、axios 使用 FormKit 制作一个全栈应用程序。为了编辑现有记录，我想用从 mysql 数据库获取的当前数据填充输入字段。我将代码精简为显示问题所需的所有内容，在此代码示例中，我使用通过异步函数“getLotById”获取的批号填充 FormKit 输入字段。批号出现在段落部分，但不出现在输入字段中。如何正确延迟 FormKit 元素的渲染，直到获取批号？这是我的代码：

<script>
// import axios
import axios from "axios";
  
export default {
    name: "LotEdit",
    data() {
        return {
            lotnumber: this.lotnumber
        }
    },
    props: {
      lotid: Number
    },
    created: async function () {
        await this.getLotById();
    },
    methods: {
        // Get Lot By Id
        async getLotById() {
            try {
                const response = await axios.get(`http://localhost:5000/lot/${this.$route.params.id}`);
                this.lotnumber = response.data.lotnumber;
                console.log(response.data);
            }
            catch (err) {
                console.log(err);
            }
        },
    }
};
</script>

<template>
  <div>
    <FormKit
      type="text"
      name="lotnumber"
      label="lotnumber"
      placeholder=""
      validation="required"
      :value="lotnumber"
    />
  </div>
  <div>
    <p> Here the lotnumber appears: {{ lotnumber }}</p>
  </div>
</template>

Answer 1

变得更聪明，我设法通过以下方式解决了这个问题：

<script>
// import axios
import axios from "axios";
  
export default {
    name: "LotEdit",
    data() {
        return {
            lotnumber: this.lotnumber
        }
    },
    props: {
        lotid: Number
    },
    mounted: async function () { 
        const response = await this.getLotById();
        const node = this.$formkit.get('lotnumber')
        node.input(response.data.lotnumber, false) 
    },
    methods: {
        // Get Lot By Id
        async getLotById() {
            try {
                const response = await axios.get(`http://localhost:5000/lot/${this.$route.params.id}`);
                console.log(response.data);
                return response;
            }
            catch (err) {
                console.log(err);
            }
        },
    }
};
</script>

<template>
  <div>
    <FormKit
      type="text"
      id="lotnumber"
      name="lotnumber"
      label="lotnumber"
      placeholder=""
      validation="required"
      :value="lotnumber"
    />{{ lotnumber }}
  </div>
</template>

请随意发布任何建议，因为我还不是专业人士......