поисковый фильтр с vue js и ax ios Dynami c url - PullRequest
Новая
       13

поисковый фильтр с vue js и ax ios Dynami c url

1 голос
/ 17 июня 2020

Это мой первый день с vue js извините, если это глупый вопрос.

Я пытаюсь ввести поиск, пока я вызываю json Данные из URL-адреса с помощью axois.

Мой код: 

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

и часть Javascript: 

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

Все работает нормально до сих пор, но когда я меняю имя во вводе поиска, ничего не меняется. Надеюсь, мне кто-нибудь поможет

1 Ответ

2 голосов
/ 17 июня 2020

просто используйте watch, чтобы прослушать изменения в поле ввода и запустить поиск: 

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