具有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来监听对输入字段的更改并触发搜索：