如何在vue表单中预填数据？

Question

我正在使用vue form编辑一个item，但是我不能断定我应该用什么方法给categoryName和description赋值，让那些值出现在form中？

我尝试在以下方法中调用 axios 并将响应分配给 categoryName 和 description：created、mounted、beforeMouned，但它不显示 categoryName 和 description 在输入字段中，尽管值是从后端获取的。另外 v-model.lazy 没有给出结果。

这是我的代码：

<template>
  <div class="pt-5">
    <form @submit.prevent="submitCategory">
      <div class="form-group">
        <label for="categoryName">Category name</label>
        <input v-model.lazy="categoryName" value="categoryName" type="text" class="form-control" id="categoryName" aria-describedby="categoryNameHelp" placeholder="Enter category name">
      </div>
      <br>
      <div class="form-group">
        <label for="description">Description</label>
        <input v-model="description" type="text" class="form-control" id="description" placeholder="Enter description">
      </div>
        <br>
      <button type="submit" class="btn btn-primary mt-2">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "EditCategory",
  data() {
    return {
      categoryName: '',
      description: '',
    }
  },
  beforeMount () {
    this.$axios.get(`/api/categories/${this.$route.params.id}`,{
        id: this.$route.params.id
      }).then((response) => {
      console.log(response.data)
      this.categoryName = response.categoryName;
      this.description = response.description;
    });    },
  methods: {
    submitCategory() {
      this.$axios.post('/api/categories', {
        categoryName: this.categoryName,
        description: this.description,
      }).then(response => {
        console.log(response)
        this.$router.push({name: 'Categories'});
      })
    },   
    initialize () {
     
     },

  },
}
</script>

<style scoped>

</style>

Answer 1

Axios 响应 object

当我们向服务器发送请求时，它会returns 响应。 Axios 响应 object 包括：

data - 从服务器返回的负载
status - 从服务器返回的 HTTP 代码
headers - headers 由服务器发送

您在 BeforeMount Hook 中完成了 console.log(response.data)。您将在 response.data object

下获得您需要的数据

this.categoryName = response.data.categoryName;
this.description = response.data.description;

如何在vue表单中预填数据？

How to prefill data in vue form?

forms

assign

vue.js

vue-component