CODEWITHSUNDEEP
javascriptvue.jssearchaxiosdatalist
Ton Gok
Ton Gok

Reputation: 152

search filter with vue js and axios dynamic url

This is my first day with vue js so sorry if it is a stupied question.

I'm trying to make a search input while i'm calling a json Data from a Url using axois.

My code:

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

and the Javascript part: 

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

Every thing is working fine till now but when i'm changing the name in the search input, no thing is changing. I hope someone could help me

Upvotes: 1

Views: 3311

Answers (1)

AVJT82
AVJT82

Reputation: 73357

just use watch to listen to changes to the input field and fire off the search:

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

Upvotes: 2

Related Questions