Exploring search filters using Vue.js and Axios for a dynamic URL

Just getting started with vue js, so please forgive me if this is a silly question.

I'm attempting to create a search input while pulling JSON data from a URL using Axios.

Here's my code:

<div id="app">
    <div class="search-wrapper">
       <label>
            <input type="text" v-model="search" placeholder="Search title.."/>
            Search here:
        </label>
    </div>
    <div class="wrapper">
        <li v-for="name in this.names " :key="name">
            {{ name }}
        </li>
    </div>
</div>

And the JavaScript section:

import axios from 'axios'

export default {
    data() {
        return {
            search: 'john',
            names: [],
        }
    },

    mounted() {
        axios
            .get('http://127.0.0.1/users/search/' + this.search)
            .then((response) => {this.names = response.data})
    },
}

Everything is functioning fine up till now, but when I change the name in the search input, nothing happens. Any assistance would be greatly appreciated.

Answer №1

To monitor changes in the input field and trigger the search, you can simply utilize the watch method:

watch: {
  search(value) {
    this.doSearch(value);
  }
},
methods: {
  doSearch(value) {
    axios
     .get('http://127.0.0.1/users/search/' + this.search)
     .then((response) => {this.names = response.data})
     .catch(e => console.log(e));
  }
}

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

Complete a promise using the then() method and return the result

I'm working with a JavaScript code snippet that looks like this: function justTesting() { promise.then(function(output) { return output + 1; }); } var test = justTesting(); Every time I check the value of the test variable, it's always ...

Surprising outcome from the glob-fs glob.readdirSync function

Below is some nodejs code that I am working with. The client initially calls /api/demosounds and then calls /api/testsounds. var glob = require('glob-fs')({ gitignore: true }); app.get('/api/demosounds',function(req,res){ var d ...

Is it possible to globally delay the execution of WebElement.sendKeys() in Protractor's onPrepare function?

While running protractor on a sluggish machine, I am in need of slowing down each key press and action performed. The action part has been successfully implemented, but how can I achieve the same for key presses? I have come up with a local solution which ...

Tips for utilizing jquery.load for fetching a section of an html document or an entire html file

I'm experimenting with jquery's load function to dynamically fetch and display HTML content, rather than using $.ajax(). I enjoy exploring the various features that jQuery offers and want to understand how each one works. Below is the code I am ...

Fetching data using Axios from a specified URL

I am currently facing an issue with the npm package axios while attempting to execute a get request to a specific URL. The problem arises as I consistently receive an error code 503. Here is the snippet of code in question: let data, response; response = ...

Retrieve the calling method's context within an exported function

In my codebase, there exists a file called utils which houses various utility functions that are utilized by different classes and components. Currently, there is a test-utils class designed specifically for karma unit tests to perform common tasks. One ...

Showing JSON object in an Angular 2 template展示JSON对象在模

When I execute the following code: stanservice.categoryDetail(this.params.get('id')) .then((data) => { this.category = JSON.stringify(data.res.rows[0]); console.log(JSON.stringify(data.res.rows[0])); }) .catch((error) => { ...

TypeScript is encountering difficulties locating a local directory

I'm currently facing an issue with my Typescript and Node.js project in Visual Studio. The error is related to importing a local folder called "source" into my top-level file, application.ts. However, despite having the necessary directory structure s ...

The Vue directive v-for with an empty key attribute does not function properly

Looking for some assistance. In my App.vue file, I have the following code: <template> ... <select class="form-control"> <option v-for="{car, index} in cars" :key="index"> {{ car.name }} </option> </select> ...

What is the best way to utilize getInitialProps specifically during the building process of a NextJS site?

When I am developing a static site using NextJS, I need the getInitialProps method to run specifically during the build process and not when the client loads the page. During the build step, NextJS executes the getInitialProps method before generating the ...

Is it possible to compile a .ts file at the root level without following the tsconfig.json configurations?

After dealing with the challenge of having both .ts and .js files coexisting in each folder for months, I have finally managed to get the app to compile correctly. The transition from JS to TS brought about this inconvenience, but the overall benefits make ...

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

Is there a way to send my form data to a different URL once it has been submitted?

In the form I am designing, customer-related information needs to be filled out. There are three tasks that I am trying to accomplish with this form: 1. Validate the information such as correct email address and mobile number. 2. Post the form data in ...

What is the process for viewing the collections of all databases while logged in as an administrator?

My aim is to display all databases along with their collections, similar to logging in as an admin user into robo3T, for example. Using the two commands below poses no issue. However, when I use the listCollections command, I only get the collections from ...

rediscovering values following verification

When handling incoming requests matching /user/read/:user_id, I utilize "router.get" In "router.param", a new object named "user" is defined with attributes like name and age Later on in the code within "router.get", the user object is retrieved using ...

storing a value in the browser's local storage

I am in the process of creating a new game that includes a high score feature. The idea is that when the current score surpasses the existing one stored locally, it will be replaced: localStorage.setItem('highScore', highScore); var HighScore = ...

Error encountered in MySQL and NodeJS: Unable to add new query after invoking quit with transactions

While working on implementing MySQL for NodeJS and Restify, I encountered a flawless experience with queries. However, when attempting to utilize data updating functionality through transactions, I faced the error message: Error: Cannot enqueue Query after ...

HTTP request in Angular with specific body content and custom headers

My goal is to access the sample API request from , as demonstrated in the documentation: curl -H "api-key: 123ABC" \ -H "Content-Type: application/json" \ -X POST \ ...

The issue I am facing involves a 404 not found axios error when attempting to send a post request

I am attempting to send data via a post request from react.js to express.js using axios, but I keep encountering a 404 not found axios error. You can view the error image here. Below is my code: export default function Upload() { const [state, setState ...

Updating Material-UI DataGrid Component with Fresh State Information

Hey there, We've integrated Material-UI into our project to build a DataGrid table of users where we can delete selected entries (checkbox) using a button. Whenever the button is clicked, it triggers an update in the object's state (removing th ...