我的Vue模板中有一个像这样的模板:
<div class="search__container">
<div v-if="!init">
<spinner/>
</div>
<div class="search__content-container" v-else-if="results.length > 0">
<div class="search__facets-container">
<menu></menu>
</div>
<div class="search__results-container">
<results></results>
</div>
</div>
<div v-else class="search__no-results">
<div v-html="noResultsTxt"></div><br>
<v-btn href="/" color="white" class="grey--text grey--border search__continue-btn">{{ continueText }}</v-btn>
<div id="suggested-products"></div>
// How do I run this here?
<script>loadSuggestions();</script>
</div>
</div>
loadSuggestions()
电话是我无法工作的。它应该仅在显示.search__no-results
div时运行。我猜我可能需要创建一个具有相同条件逻辑的观察器才能实现这一点,但这似乎过于复杂,因为我已经在模板中使用了逻辑。
关于在这里使用的最佳模式的任何想法?
你可以在search__no-results
中创建一个组件,然后在loadSuggestions()
或mounted
钩子中调用created
。
要么
computed() {
noResult() {
return this.init && this.results.length <= 0;
},
},
watch: {
noResult(noResult) {
if (noResult) {
this.loadSuggestions();
}
}
}