如何将 v-model 数据传递到 vue.js 中的 URL 路径？答案

【问题标题】：How to pass v-model data to the URL path in vue.js?如何将 v-model 数据传递到 vue.js 中的 URL 路径？
【发布时间】：2021-09-19 23:57:17
【问题描述】：

我开发了一个包含一个搜索按钮的仪表板，如果我在搜索框中输入一些数据，该数据应该传递到我的后端 URL 路径，基于该 url 路径我必须调用我的后端 API，请帮助我如何将 v-model 数据传递到我的 url 路径。

Dashboard.vue

<template>
<div class="main">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <img src="../assets/education.png" alt="notFound" class="education-image" />
        </div>
        <ul class="nav navbar-nav">
            <li>
                <p class="brand">Bookstore</p>
            </li>
        </ul>
        <div class="input-group">
            <i @click="handlesubmit();" class="fas fa-search"></i>
            <div class="form-outline">
                <input type="search" v-model="name" class="form-control" placeholder='search...' />
            </div>
        </div>
 </div>
</div>
</template>
<script>
import service from '../service/User'
export default {
    
    data() {
        return {
            name:'',
           
        }
    },
    methods:{
         handlesubmit(){
             let userData = {
               name:this.name,
             }
             service.userSearchByName(userData).then(response=>{
                 this.books.push(...response.data);   
             })
         }
    }

}
</script>

user.js

 userSearchByName(data){
        return axios.getData(`/searchBooksbyName/${}`,data);
    }

【问题讨论】：

标签： javascript vue.js axios v-model

【解决方案1】：

您必须根据后端 API 的预期使用正确的 HTTP 动词 (GET/POST)。在 axios 中使用合适的方法。

使用 get 的示例：

 userSearchByName(data){
        return axios.get(`/searchBooksbyName/${data.name}`);
    }

【讨论】：

【解决方案2】：

使用适当的 axios 方法发出任何请求

这是一个简单的解决方案，您可以在发出任何 axios 请求（POST、GET、PATCH、PUT、DELETE）时使用。

handlesubmit(){

        const inputQuery = this.name;
        
       return new Promise((resolve, reject) => {
        axios.get(`/searchBooksbyName/${inputQuery}`)
            
            .then((response) => {
                if (response){
                 //If you want you can store the value you get in response
                } 
             
              resolve(response);
              console.log("Get Response", response);
              
            })
            .catch((error) => {
              if(error){
             
                //Perform some task here
              }
            
              console.log(" Error", error);
              reject(error);
            });
    }

【讨论】：