feat(highlight): make examples use the new Highlight component

algolia · Apr 4, 2017 · fa377c6 · fa377c6
1 parent 993fa51
commit fa377c6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/packages/examples/e-commerce/src/App.vue b/packages/examples/e-commerce/src/App.vue
@@ -64,8 +64,12 @@
                 <img class="result__image img-responsive" :src="result.image">
 
                 <div class="result__info">
-                  <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-                  <div class="result__type" v-html="result._highlightResult.type.value"></div>
+                  <h2 class="result__name">
+                    <ais-highlight :result="result" attribute-name="name"/>
+                  </h2>
+                  <div class="result__type">
+                    <ais-highlight :result="result" attribute-name="type"/>
+                  </div>
                   <div class="result__rating">
                     <template v-for="n in 5">
                       <span v-if="n <= result.rating" class="result__star"></span>

diff --git a/packages/examples/multi-index/src/App.vue b/packages/examples/multi-index/src/App.vue
@@ -21,10 +21,16 @@
               <img class="result__image img-responsive" :src="result.thumbnailImage">
 
               <div class="result__info">
-                <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-                <div class="result__type" v-html="result.category"></div>
+                <h2 class="result__name">
+                  <ais-highlight :result="result" attribute-name="name"/>
+                </h2>
+                <div class="result__type">
+                  {{ result.category }}
+                </div>
 
-                <div class="result__description" v-if="result._highlightResult.shortDescription" v-html="result._highlightResult.shortDescription.value"></div>
+                <div class="result__description" >
+                  <ais-highlight v-if="result._highlightResult.shortDescription" :result="result" attribute-name="shortDescription"/>
+                </div>
 
                 <div class="result__rating">
 
@@ -51,9 +57,15 @@
               <img class="result__image img-responsive" :src="result.image">
 
               <div class="result__info">
-                <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-                <div class="result__type" v-html="result._highlightResult.type.value"></div>
-                <div class="result__description" v-html="result._highlightResult.description.value"></div>
+                <h2 class="result__name">
+                  <ais-highlight :result="result" attribute-name="name"/>
+                </h2>
+                <div class="result__type">
+                  <ais-highlight :result="result" attribute-name="type"/>
+                </div>
+                <div class="result__description">
+                  <ais-highlight :result="result" attribute-name="description"/>
+                </div>
                 <div class="result__rating">
                   <template v-for="n in 5">
                     <span v-if="n <= result.rating" class="result__star"></span>

diff --git a/packages/examples/quick-start/index.html b/packages/examples/quick-start/index.html
@@ -17,8 +17,12 @@
             <img class="result__image img-responsive" :src="result.image">
 
             <div class="result__info">
-              <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-              <div class="result__type" v-html="result._highlightResult.type.value"></div>
+              <h2 class="result__name">
+                <ais-highlight :result="result" attribute-name="name"/>
+              </h2>
+              <div class="result__type">
+                <ais-highlight :result="result" attribute-name="type"/>
+              </div>
               <div class="result__rating">
                 <template v-for="n in 5">
                   <span v-if="n <= result.rating" class="result__star"></span>