传递表单值以在Vue.js中构建Rest API URL

Question

I created this component in vue :

<template>
  <div>
    <h2>Find User By ID</h2>
    <input v-model="userId" type="number" placeholder="modifiez-moi" />
    <br />
    <p v-if="userId.length != 0">
      L'Utilisateur est : {{ getUser(userId) }}
      <!-- returns nothing...-->
      <br />
      {{ user["id"] }} {{ user["email"] }} {{ user["username"]
      }}<!-- returns object-->
    </p>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "FindUser",
    data() {
      return {
        user: null,
        userId: ""
      };
    },
    methods: {
      getUser(userId) {
        axios
          .get("http://localhost:4000/api/users/" + this.userId)
          .then(response => {
            console.log(response);
            this.user = response.data.data;
          });
      }
    },
    mounted() {
      // this.getUser();
    }
  };
</script>

This code is working... But i have several issues :

• if i type an id that not fit a user, the previous result is not removed
• Ideally i'd like to use a button to send the request
• My third issue is that the request is repeated for exemple, the console.log is displayed more than one time...

Answer 1

控制台执行的时间不同，因为在代码之上，您正在使用if语句if userId.length！= 0，然后在每个键上输入它将发送请求。请不要使用此if语句

Answer 2

• Button to send the request is a good idea, use that .(other options could be keyup event, debounce if a button is too much).
• Change the v-if to something more concrete like test for user !== null since user is default as null .
• Check for a validation for a number input only when calling the method from the button that makes sure that you intended the input to be number and api is called only with a valid input.

Can try this:

<template>
  <div>
    <h2>Find User By ID</h2>
    <input v-model="userId" type="number" placeholder="modifiez-moi" />
    <!--@click is shorthand for v-on:click-->
    <button @click="getUser($event)">Get User</button>
    <br />
    <p v-if="user !== null">
      L'Utilisateur est : {{ displayWhateverHere }}
      <br />
      {{ user["id"] }} {{ user["email"] }} {{ user["username"] }}
    </p>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "FindUser",
    data() {
      return {
        user: null,
        userId: ""
      };
    },
    methods: {
      getUser(event) {
        /*Check for validations on input and then call the api*/
        let validFlag = !isNaN(this.userId);
        if (validFlag) {
          axios
            .get("http://localhost:4000/api/users/" + this.userId)
            .then(response => {
              console.log(response);
              this.user = response.data.data;
              /*If needed to clear the userId*/
              this.userId = "";
            });
        } else {
          /*input value is not a number -do something about it (alert/notify)*/
          this.userId = "";
        }
      }
    },
    mounted() {
      // this.getUser();
    }
  };
</script>