Функция Return HTML

Question

У меня есть функция, которая возвращает 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>`));

    }
},

Но элемент <b> не отображается в браузере как элемент html. Его отображение в виде строки ... Как мне отобразить этот <b> элемент?

Tnx

Answer 1

Это потому, что когда вы предоставляете строку в качестве второго аргумента createElement, VueJS фактически вставляет строку как текстовый узел (следовательно, ваши теги HTML будут отображаться как есть). На самом деле вы хотите использовать объект данных в качестве второго аргумента , который дает вам более точный контроль над свойствами созданного элемента:

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

Конечно, когда вы используете innerHTML, используйте его с осторожностью и никогда не вставляйте предоставленный пользователем HTML, чтобы избежать атак XSS.

Answer 2

Вы также можете создать компонент и использовать v- html для визуализации вывода.

Объявить реквизиты для ваших входных данных:

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

И использовать шаблон, который использует ваши логи c в 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>

Это обеспечивает большую гибкость при использовании более сложных макетов.

Рабочий пример здесь

Answer 3

Предоставьте более подробную информацию (возможно, изображение) о том, как он не отображается. Подумайте об использовании пользовательского класса CSS, чтобы увидеть div и что с ним происходит.

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

, а затем просто используйте класс "bold" вместо "b".