Как вызвать скрипт на условии шаблона в Vue

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 hook.

ИЛИ

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