这是我使用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})
},
}
到目前为止,一切正常,但是当我在搜索输入中更改名称时,没有任何变化。我希望有人可以帮助我
仅用于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));
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句