时间戳

首页 > 解决方案 > vue js 向api发送数据

vue.js - vue js 向api发送数据

问题描述

我正在尝试将数据发送到 api 端点，但我用来触发操作的方法没有获取用户 ID 和表单数据。

我有一个用于通过 api 更新用户信息的表单。在有人输入新信息之前，我会获取用户信息并将其显示为占位符文本。我正在尝试将数据发送到端点，但该方法没有获取用户 ID 和表单数据。[[编辑用户详细信息]]。这是代码

import axios from "axios";
export default {
  name: "Edit",
  data() {
    let userId = this.$route.params.id;
    this.getUserDetails(userId);
    this.editUserDetails(userId);
    console.log(userId);
    return {
      userDetails: {},
      formdata: {
        name: '',
        occupation: '',
        email: '',
        bio: '',
      },
    };
  },
  methods: {
    getUserDetails(id) {
      console.log(id);
      axios
        .get(`https://607e868602a23c0017e8b79e.mockapi.io/api/v1/users/${id}`)
        .then((response) => {
          this.userDetails = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    editUserDetails(id) {
      console.log(this.formdata);
      console.log(id);
      axios
        .patch(`https://607e868602a23c0017e8b79e.mockapi.io/api/v1/users/${id}`, this.formdata)
        .then((response) => {
          console.log(this.formdata);
          console.log(response);
        })
        .catch((error) => {          
          console.log(this.formdata);
          console.log(error);
        });
    },
  },
};

这是我在更新之前用来从用户那里收集数据的表格

 <form @submit.prevent="editUserDetails(id)">
          <div class="container">
            <div class="row">
              <div class="label col-2"><label for="">ID: </label></div>
              <div class="text col-8">
                <span v-bind="formdata.id">{{ userDetails.id }}</span>
              </div>
            </div>
            <div class="row">
              <div class="label col-2"><label for="name">Name: </label></div>
              <div class="datas col-8">
                <input
                  class="input"
                  id="name"
                  type="text"
                  v-bind="formdata.name"
                  :placeholder="[[userDetails.name]]"
                />
              </div>
            </div>
            <div class="row">
              <div class="label col-2">
                <label for="occupation">Occupation: </label>
              </div>

              <div class="datas col-8">
                <input
                  class="input"
                  id="occupation"
                  type="text"
                  v-bind="formdata.occupation"
                  :placeholder="[[userDetails.occupation]]"
                />
              </div>
            </div>
            <div class="row">
              <div class="label col-2"><label for="email">Email: </label></div>

              <div class="datas col-8">
                <input
                  class="input"
                  id="email"
                  type="text"
                  v-model="formData"
                  v-bind="formdata.email"
                  :placeholder="[[userDetails.email]]"
                />
              </div>
            </div>
            <div class="row">
              <div class="label col-2"><label for="bio">Bio: </label></div>

              <div class="datas col-8">
                <textarea
                  class="input"
                  name=""
                  id="bio"
                  cols="60"
                  rows="4"
                  v-bind="formdata.bio"
                  :placeholder="[[userDetails.bio]]"
                ></textarea>
              </div>
            </div>
          </div>
          <button>Submit</button>
        </form>

可能是什么问题...

标签： vue.jsaxiosvuejs3

解决方案

这就是我设法解决它的方法。我修改了表单输入看起来像这样

            <div class="row">
              <div class="label col-2"><label for="name">Name: </label></div>
              <div class="datas col-8">
                <input
                  class="input"
                  id="name"
                  type="text"
                  v-model="formdata.name"
                  :placeholder="[[userDetails.name]]"
                />
              </div>
            </div>

然后我把js方法改成这样

  data() {
    let userId = this.$route.params.id;
    this.getUserDetails(userId);
    return {
      userDetails: {},
      formdata: {
        name: "",
        occupation: "",
        email: "",
        bio: "",
      },
    };
  },

methods: {
    editUserDetails(id) {
      let userId = this.$route.params.id;
      axios
        .patch(
          `https://ti-react-test.herokuapp.com/users/${userId}`,
          {
            "name": this.formdata.name,
            "email": this.formdata.email,
            "occupation": this.formdata.occupation,
            "bio": this.formdata.bio
          }
        )
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
}

推荐阅读