вернуть элементы из метода vuejs

Question

Я немного новичок в vuejs, и я даже не уверен, что именно я ищу, У меня есть этот шаблон:

<template>
    <md-content class="md-elevation-2">
        <div class="md-layout">
            <div class="md-layout-item" v-for="key in ruleData">
                {{ getKeyOutput(key) }}
            </div>
        </div>
    </md-content>
</template>

и мой сценарий:

<script>
    export default {
        props: ['ruleData'],
        methods: {
            getKeyOutput(value) {
                switch (typeof value) {
                    case 'string':
                        if (/(ban)$/g.test(value)) {
                            return createElement(`<h1>${ value }</h1>`)  // here is the problem
                        } else {
                            return value
                        }
                        break
                    case 'number':
                        return String(value)
                        break
                    case 'boolean':
                        return String(value)
                        break
                    default:
                        return value
                        break
                }
            }
        }
    }
</script>

В некоторых случаях я хочу вернуть строку, а в некоторых других случаях, например, вернуть HTML-компонент, например, h1, и я не могу понять, как мне это нужно, или даже если я есть правильный подход для этого.

Answer 1

Вы должны использовать директиву v-html для рендеринга HTML-тегов, которые хранятся в виде строки.

если вы не используете v-html, то vuejs по умолчанию экранирует теги html, и поэтому теги html отображаются в виде простого текста. Вам не нужно использовать createElement() в любом месте кода, просто удалите его.

Измените код шаблона Vue, как показано ниже, и убедитесь, что вы получаете ожидаемый результат

<div 
    class="md-layout-item" 
    v-for="(value,key) in ruleData" 
    :key="key" 
    v-html="getKeyOutput(value)">
</div>

Вам больше не нужно использовать createElement(), просто верните HTML-код в виде string или template string

if (/(ban)$/g.test(value)) {
    return `<h1>${ value }</h1>`; //problem solved
 } else {
    return value
 }

Подробнее о v-html в документации https://vuejs.org/v2/guide/syntax.html#Raw-HTML