Inserting HTML in a Vue instantsearch component

Question

I'm trying to convert a numerical value for product ratings in a Vue instantsearch component into images of stars and half stars.

So far what I have is:

<template>
  <ais-instant-search
    :search-client="searchClient"
    :index-name="indexName"
  >
    <ais-hits>
      <template v-slot:item="{ item }">
        <div class="rating stars">{{ stars(item.rating) }}</div>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<script>
  methods: {
    stars(rating) {
      const fullImg = '<svg><use xlink:href="sprites.svg#icon-star-full"></use></svg>';
      const halfImg = '<svg><use xlink:href="sprites.svg#icon-star-half"></use></svg>';
      // perform some calculation on the rating value that's passed in to output all the full and half stars combined into a single HTML element
    }
  },
</script>

I've already got the calculations working for outputting all the images of the stars.

What I don't know how to do is to then insert that combined string of HTML into the DOM.

If I just return it, it gets printed out as code, rather than rendering the HTML.

I know I have to use innerHTML but can't figure out what to use that on. How do you determine the current element that the method is called from?

Answer 1

You should be using v-html directive to display html string into vue component

<ais-hits>
  <template v-slot:item="{ item }">
    <div class="rating stars" v-html="stars(item.rating)"></div>
  </template>
</ais-hits>

check the update code above with v-html