Discover the steps to transfer v-model data into the URL path within vue.js

I created a dashboard with a search button. When I input data into the search box, I want that data to be sent to my backend URL path so I can call my backend API. Can someone assist me in figuring out how to pass the v-model data to my URL path?

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);
    }

Answer №1

It is essential to match the correct HTTP method (GET/POST) with what your backend API requires. Utilize the suitable axios functions accordingly.

Here's an example using GET:

 findUserByName(data){
        return axios.get(`/retrieveBooksbyName/${data.name}`);
    }

Answer №2

How to properly implement axios methods for handling requests

Here is a straightforward approach you can take when using axios to handle various types of requests such as POST, GET, PATCH, PUT, and DELETE.

handleSubmit(){

        const userInput = this.name;
        
       return new Promise((resolve, reject) => {
        axios.get(`/searchBooksbyName/${userInput}`)
            
            .then((response) => {
                if (response){
                 //You may choose to save the response data if needed
                } 
             
              resolve(response);
              console.log("Received Response", response);
              
            })
            .catch((error) => {
              if(error){
             
                //Do something in case of an error
              }
            
              console.log(" Error", error);
              reject(error);
            });
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

Error: Unable to save document - Document.save function is invalid

I'm currently working on creating tests for an Express application that involves an User model. One of my methods is structured like this: let user = await User.findById(req.params.userId); user.name = req.body.name || user.name; user.password = re ...

Error encountered while integrating AngularJS date picker

I am facing an issue while trying to set up the AngularJS date picker from this link. I am getting an error message that I don't quite understand. Could it be due to a missing library file or just syntax errors? var myApp = angular.module('myA ...

Guide to loading an image and incorporating it into a canvas using Gatsby's server-side rendering

I encountered an issue where I was unable to create an image using any of the supported types like CSSImageValue, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, or OffscreenCanvas in my SSR application with Gatsby. De ...

The method to retrieve post data from Angular / Ionic to PHP

I'm having some issues accessing the JSON data that I'm posting from Angular / Ionic to PHP. Below is the PHP code that I'm using: $jsonData = file_get_contents('php://input'); $data = json_decode($jsonData, true); When I saved ...

Utilize MaterialUI's Shadows Type by importing it into your project

In our project, we're using Typescript which is quite particular about the use of any. There's a line of code that goes like this: const shadowArray: any = Array(25).fill('none') which I think was taken from StackOverflow. Everything s ...

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

Leverage ESlint for optimal code quality in your expressjs

Is there a way to use ESlint with Express while maintaining the no-unused-vars rule? After enabling ESlint, I am encountering the following issue: https://i.stack.imgur.com/7841z.png I am interested in disabling the no-unused-vars rule exclusively for e ...

React-querybuilder experiencing issues with validator functionality

While utilizing the react-querybuilder, I have encountered an issue with field validation not functioning correctly. Upon reviewing this StackBlitz, it appears that when clicking on Rule and checking all fields, there are no errors present. export const fi ...

An excellent user interface that enables the user to easily reset a field to its original default value

Within my web-based application, users have the ability to customize values in specific textboxes. If they choose not to customize a value, the system will default to a predetermined option. I am looking to incorporate a feature that allows users to easil ...

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

Prevent individual elements from shifting around on browser resizing within a React form

Having issues with a React form that includes an image gallery and input fields. import React, { Component } from 'react'; import ImageGallery from 'react-image-gallery'; import { Container, Row, Col, InputGroup, Button, FormControl, ...

Cease the execution of a task in Express.js once the request timeout has been

Suppose we have the following code snippet with a timeout of 5 seconds: router.get('/timeout', async (req, res, next) => { req.setTimeout(5000, () => { res.status(503) res.send() }) while (true) { ...

The website code lacks a dynamically generated <div> element

When using jQuery to dynamically add content to a "div" element, the content is visible in the DOM but not in the view page source. For example: <div id="pdf"></div> $("#btn").click(function(){ $("#pdf").html("ffff"); }); How can I ensur ...

Creating immersive visualizations using Three.js and WebGL, as well as leveraging 2D canvas for rendering graphics, involves passing the getImageData

Recently diving into WebGL (and 3D graphics in general) using three.js, I'm looking to create multiple textures from a 2D canvas for rendering various meshes, each with its own unique texture. Simply passing the canvas to a new THREE.Texture() causes ...

What is the best way to overlay an SVG line on top of a CSS style?

Is there a way to make SVG lines appear on top of CSS-styled elements in my HTML file? I have a white background SVG created with JavaScript using d3, and I am adding CSS-styled rectangles on top of it. However, I also want SVG lines (created with JavaScri ...

Error: Cannot access the length property of an undefined value in the JEST test

I'm currently working on incorporating jest tests into my project, but I encountered an error when running the test. The issue seems to be related to a missing length method in the code that I am attempting to test. It appears to be originating from s ...

What is the reason behind Express not including Node as a dependency?

As I dive into learning Express, I've noticed that it shares some functionality with Node according to the documentation. It states that request and response in Express are essentially the same as those in Node. You can find more information here. I ...

How to implement 'cancel changes' feature in AngularJS with the use of splice method

In my datagrid, I am displaying data from an array called listOfAttributes. Each row has an edit icon which, when clicked, reveals two buttons: save and cancel edit. The issue I am facing is that when a user clicks on cancel edit, the updated data should ...

Different ways to separate an axios call into a distinct method with vuex and typescript

I have been working on organizing my code in Vuex actions to improve readability and efficiency. Specifically, I want to extract the axios call into its own method, but I haven't been successful so far. Below is a snippet of my code: async updateProf ...