Question

我的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时，它才运行。我想我可能需要使用相同的条件逻辑来创建观察程序以实现此目的，但是鉴于我已经知道模板中的逻辑，这似乎过于复杂。

对在此使用最佳模式有任何想法吗？

Answer 1

您可以在search__no-results内创建一个组件，然后在loadSuggestions()或mounted钩子中调用created。

OR

computed() {
  noResult() {
    return this.init && this.results.length <= 0;
  },
},
watch: {
  noResult(noResult) {
    if (noResult) {
      this.loadSuggestions();
    }
  }
}

如何在Vue中的模板条件下调用脚本

1 个答案: