使用 vue js 和 axios 动态搜索过滤器 url

Question

这是我第一天使用 vue js 很抱歉，如果这是一个愚蠢的问题。

我在使用 axois 从 Url 调用 json 数据时尝试进行搜索输入。

我的代码：

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

到目前为止一切正常，但是当我在搜索输入中更改名称时，没有任何变化。我希望有人能帮助我

Answer 1

只需使用 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));
  }
}

使用 vue js 和 axios 动态搜索过滤器 url

search filter with vue js and axios dynamic url

javascript

search

datalist

vue.js

axios