0

I have on my search page a textbox and search button.

I created a facet using Vue.js. Everything is working at the first time that I search for something , but when I digit another text and search for it, my facet is not being updated with the new values.

I tried to following this, but unsuccessful: https://michaelnthiessen.com/force-re-render/

Anyone can save me with that? 

function CreateFacetSiteSearch(resultsFacet) {
    new Vue({
        el: '#facets',
        data() {
            return {
                facets: resultsFacet.Facets,
                totalresults: resultsFacet.TotalNumberOfResults
            }
        }
    });
}

CreateFacetSiteSearch(results); => I call this function everytime that I search for a new text.

<div class="search-filter-container" id="facets" v-if="totalresults > 0">
   <div class="links-container">
            <a href="#" v-for="item in facets" onclick="CallSearchFacet(this)" :result-field-name="item.Item1" :result-count="item.Item2">{{ item.Item1 }} ({{ item.Item2 }})</a>
   </div>
 </div>
Fernando Feks
  • 71
  • 1
  • 7
  • To the Component that you want to refresh you can bind `:key="yourSearchString"`. When the search string changes your component will rerender. – Adam Orłowski Jan 23 '20 at 23:30

1 Answers1

0

Try this magic spell:

vm.$forceUpdate();

or

you can also use :key="someVariableUnderYourControl" and change the key when you want to component to be completely rebuilt.

reference : Can you force Vue.js to reload/re-render?

Kenneth
  • 2,813
  • 3
  • 22
  • 46