我有一個搜索欄，在我的導航欄組件中，通過Axios，我得到了過濾后的文章。
。export default {
data（） {
return {
articles: [],
article: {},
搜索。''/span>。
}
},
methods: {
getArticles（） {
const url = `${baseApiUrl}/search? search=${this.search}`。
axios(url).then((res) => {
this.articles = res.data;
});
}
},
watch: {
搜索() {
const route = {
name: 'searchArticles'。
}
if(this.search !==') {
route.query = {
搜索。this.search.
}
}
},
'$route.query.search': {
immediate: true,
handler（value） {
this.search = value
}
}
},
};
</script><template>
<header class="navbar"/span>>
<form class="searchInput"/span>>
<input v-model="search" @keyup。 enter="getArticles()" placeholder="Search..." />
<router-link :to="{ path: '/search', query: { search: this.search }}">
<button type="submit">/span>
<font-icon class="icon" 。 icon="['fas', 'search']"></font-icon>/span>
</button>/span>
</router-link>/span>
</form>/span>
</header>/span>
</template>/span>我有我的searchResult組件來渲染搜索結果。
。export default {
data（） {
return {
articles: [],
article: {},
搜索。''。
}
},
created（） {
const url = `${baseApiUrl}/search? search=${this.search}`。
axios(url).then((res) =>； {
this.articles = res.data;
});
},
watch: {
搜索() {
const route = {
name: 'searchArticles'。
}
if(this.search !==') {
route.query = {
搜索。this.search.
}
}
},
'$route.query.search': {
immediate: true,
handler（value） {
this.search = value
}
}
},
};
</script><template>
<div>/span>
<div class="result-search">
<ul>/span>
<li v-for=" (article, i) in articles" : key="i"/span>>
<ArticleItem : article="article" />
</li>
</ul>/span>
</div>/span>
</div>/span>
</template>/span>當我第一次搜索時，它會把我帶到/search?...并顯示搜索結果，但如果我在欄位中輸入另一個值，我的URL就會從/search?search=a變成/search?search=b，結果仍然是搜索A的結果，只有當我重新加載頁面時，它才給我帶來搜索B的結果。 為什么會發生這種情況？ 我所有的內容都在我的內容組件中，通過
我的應用組件： 。<template>
<div id="app"/span>>
<Header :hideUserDropdown="！user" />
<Loading v-if="validatingToken"/span> />
<Content v-else />
<Footer />
</div>
</template>/span>uj5u.com熱心網友回復：
用于搜索你的資料的axios呼叫目前存在于你的created鉤中。這意味著它將只在該頁面/組件的初始加載時運行。
將你的搜索功能移到一個方法中，并從你的觀察器中呼叫它，即
span class="hljs-attr">watch: {
'$route.query.search': {
immediate: true,
fetchArticles(value)
}
},
methods: {
async fetchArticles（val） {
let url = `${baseApiUrl}/search? search=${val}`
try {
let res = await axios(url)
this.articles = res.data.
} catch （錯誤） {
console.log(`An error occurred attempting to fetch articles with search term of ${val}: `, error)
} finally {
//在這里做一些事情，如果你需要的話。
}
}
如果你遇到困難，Vue的檔案是很好的。這里有一個Vue生命周期鉤子的鏈接，以及何時可以使用它們:)
Vue的生命周期鉤子。
標籤：