CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Nikola
Nikola

Reputation: 207

Function Return HTML

I have function who return html

renderSuggestion(suggestion) {
    const query = this.query;

    if (suggestion.name === "hotels") {
        const image = suggestion.item;
        return this.$createElement('div', image.title);
    } else {
        let str = suggestion.item.name;
        let substr = query;
        return this.$createElement('div', str.replace(substr, `<b>${substr}</b>`));

    }
},

But<b> element not render in browser as html element. Its display like string... How I display this <b> element?

Tnx

Upvotes: 0

Views: 1258

Answers (3)

Terry
Terry

Reputation: 66123

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.

Upvotes: 2

Radu Diță
Radu Diță

Reputation: 14171

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

Upvotes: 1

Onion
Onion

Reputation: 11

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

Upvotes: 0

Related Questions