各位下午好
如何Get每次使用我的應用程式上的搜索按鈕發送請求？
我不想從 API 下載整個 JSON 只是搜索結果？
非常感謝。
那是我的搜索欄：
<div id="app">
<div class="search-wrapper">
<input type="text"
class="search-bar"
v-model="search"
placeholder="Search in the titles"/>
</div>
這是我擁有的 axios 部分：
axios
.get(
`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`
)
.then((response) => {
this.items = response.data.results;
});
uj5u.com熱心網友回復：
第 1 步：創建HTML模板
<div >
<form>
<input
type="search"
@input="searchByTitle($event.target.value)"
v-model="search"
placeholder="Search by title"
/>
</form>
</div>
第 2 步：添加search by title method
searchByTitle(value) {
clearTimeout(this.debounce);
this.debounce = setTimeout(() => {
if (value.length >= 3) {
this.params = `q=${value}`;
this.loadPressRelease();
}
}, 600);
},
REST API當有 3 個或 3 個以上的字符時，我們必須撥打電話，并debounce在我們停止輸入后添加，然后才REST API撥打電話
第 3 步：watch在清除搜索文本時添加
watch: {
search(newVal, oldVal) {
if (oldVal && !newVal) {
console.log("morning has broken...");
}
if (!newVal) {
this.clearSearch();
}
},
},
第 4 步：添加搜索欄css樣式
.search-bar {
border: 1px solid #ccc;
outline: 0;
border-radius: 10px;
width: 50%;
margin-left: 10px;
padding: 0.5rem;
}
.search-bar:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346405.html
上一篇：防止Vue.js重新渲染子組件