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

问题描述 投票:0回答:1

我的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时运行。我猜我可能需要创建一个具有相同条件逻辑的观察器才能实现这一点,但这似乎过于复杂,因为我已经在模板中使用了逻辑。

关于在这里使用的最佳模式的任何想法?

vue.js vuejs2 vue-component
1个回答
1
投票

你可以在search__no-results中创建一个组件,然后在loadSuggestions()mounted钩子中调用created

要么

computed() {
  noResult() {
    return this.init && this.results.length <= 0;
  },
},
watch: {
  noResult(noResult) {
    if (noResult) {
      this.loadSuggestions();
    }
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.