我正在用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>
3条答案
按热度按时间okxuctiv1#
我建议在FormKit输入上使用一个v模型。因为它是双向绑定的,这意味着一旦async/await完成,数据也会被填充到模板上。类似于...
oewdyzsn2#
变得有点聪明,我设法解决这个问题在以下方式:
请随时张贴任何建议,因为我还不是一个专业的...
kulphzqa3#
我还在研究如何处理受控表单,但我想另一种方法是使用Form Generation