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

f0brbegy 于 2022-11-05 发布在 iOS

关注(0)|答案(3)|浏览(165)

我正在用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>

axios

来源：https://stackoverflow.com/questions/71937555/how-to-populate-formkit-input-fields-with-dynamic-data-fetched-from-a-database

3条答案

按热度按时间

okxuctiv1#

我建议在FormKit输入上使用一个v模型。因为它是双向绑定的，这意味着一旦async/await完成，数据也会被填充到模板上。类似于...

<FormKit
  v-model="lotnumber"
  type="text"
  name="lotnumber"
  label="lotnumber"
  placeholder=""
  validation="required"
  :value="lotnumber"
/>

赞(0）回复(0）举报 2022-11-05

oewdyzsn2#

变得有点聪明，我设法解决这个问题在以下方式：

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

请随时张贴任何建议，因为我还不是一个专业的...

赞(0）回复(0）举报 2022-11-05

kulphzqa3#

我还在研究如何处理受控表单，但我想另一种方法是使用Form Generation

<script>
export default {
  // ...
  async setup() {
    try {
      const response = await axios.get(`http://localhost:5000/lot/${this.$route.params.id}`);

      const schema = [
        {
          $formkit: "text",
          label: "Lot Number",
          value: response.data.lotnumber,
          validation: "required",
        },
      ];
    } catch (err) {
      console.log(err);
    }

    return { schema }
  }
  // ...
}
</script>

<template>
  <FormKit type="form">
    <FormKitSchema :schema="schema" />
  </FormKit>
</template>

赞(0）回复(0）举报 2022-11-05

我来回答

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

3条答案

相关问题

热门标签

最新问答