[Vuejs]-Function Return HTML

by

1👍

✅

You can also create a component and use v-html to render the output.

Declare props for your inputs:

export default {
  props: {
    suggestion: Object,
    query: String
  }
};

And use a template that uses your logic in the template part

<template>
  <div class="hello">
    <div v-if="suggestion.name === 'hotels'">{{suggestion.item.title}}</div>
    <div v-else>
      <div v-html="suggestion.item.name.replace(this.query, `<b>${this.query}</b>`)"/>
    </div>
  </div>
</template>

This allows for greater flexibility when using more complex layouts.

A working example here

👤Radu Diță

2👍

That is because when you provide a string as the second argument of createElement, VueJS actually inserts the string as a text node (hence your HTML tags will appear as-is). What you want is actually to use a data object as the second argument, which give you finer control over the properties of the created element:

this.$createElement('div', {
    domProps: {
        innerHHTML:  str.replace(substr, `<b>${substr}</b>`)
    }
});

Of course, when you are using innerHTML, use it with caution and never insert user-provided HTML, to avoid XSS attacks.

👤Terry

0👍

Provide more detail(possibly a picture) of how it’s not showing. Consider using a custom CSS class to see the div and what’s happening to it.

bold {
    border-style: black;
    font-weight: bold;
}

then just use the “bold” class instead of “b”.

👤Onion

Leave a comment