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

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

按ID查找用户



L'Usilisateur est:{{getUser（userId）}


{{user[“id”]}{{user[“email”]}{{user[“username”]
}}

从“axios”导入axios；
导出默认值{
名称：“FindUser”，
数据（）{
返回{
用户：null，
用户ID:“
};
},
方法：{
getUser（用户ID）{
axios
.get（“http://localhost:4000/api/users/“+this.userId）
。然后（响应=>{
控制台日志（响应）；
this.user=response.data.data；
});
}
},
安装的（）{
//这个.getUser（）；
}
};

此代码正在运行。。。但我有几个问题：

• 如果键入的id不适合用户，则不会删除以前的结果
• 理想情况下，我希望使用按钮发送请求
• 我的第三个问题是请求被重复。例如，console.log被多次显示

  ---

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

按钮发送请求是个好主意，使用该按钮（其他） 选项可以是

keyup

event，如果按钮过多，则取消按钮）

将

v-if

更改为更具体的测试

user！==空

，因为

用户

默认为

空

仅在调用 方法，该按钮确保您希望输入 只有使用有效的输入才能调用be编号和api

可以试试这个：

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

按ID查找用户
获取用户



L'Usilizateur est:{{{displayWhateverHere}}


{{user[“id”]}{{user[“email”]}{{user[“username”]}}

从“axios”导入axios；
导出默认值{
名称：“FindUser”，
数据（）{
返回{
用户：null，
用户ID:“
};
},
方法：{
getUser（事件）{
/*检查输入的验证，然后调用api*/
让validFlag=！isNaN（this.userId）；
if（validFlag）{
axios
.get（“http://localhost:4000/api/users/“+this.userId）
。然后（响应=>{
控制台日志（响应）；
this.user=response.data.data；
/*如果需要，请清除用户ID*/
this.userId=“”；
});
}否则{
/*输入值不是数字-对此采取措施（警报/通知）*/
this.userId=“”；
}
}
},
安装的（）{
//这个.getUser（）；
}
};