Propriété de rendu VueJS dans une chaîne HTML en utilisant v-html

2
Lim Socheat 2020-01-17 20:33.

J'ai une chaîne de html que j'obtiens d'éditeur et stockée dans la base de données.

<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>{{user}}</p>

Je veux le récupérer de la base de données et le rendre au format HTML. quand j'utilise v-html, il sera rendu comme: 

<v-card-text v-html="content"></v-card-text>

Profil de l'utilisateur:

{{utilisateur}}

Comment rendre {{hello}} à partir d'une propriété de données si j'ai une propriété de données comme celle-ci: 

data() {
        return {
            user: "Lim Socheat",
            content:"<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>{{user}}</p>"
        };
    },

Résultat attendu:

Profil de l'utilisateur:

Lim Socheat

car {{user}} sera rendu comme Lim Socheat

vue.js nuxt.js

2 answers

5
Vijay Joshi 2020-01-17 20:40.

Faites du contenu une propriété calculée. Et puis utilisez-le comme ceci:

  computed: {
    content() {
       return '<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>' + this.user + '</p>';
    }
  }

Vous pouvez utiliser toutes les variables définies dans les données de cette manière.

Mise à jour: Puisque OP obtient la chaîne HTML du backend, ils doivent remplacer les variables dans ce cas. Nous avons gardé une carte de toutes les variables qui pourraient venir, puis nous créons un Regex dynamiquement pour remplacer ladite clé du code.

  computed: {
    content() {
      // keep a map of all your variables
      let valueMap = {
        user: this.user,
        otherKey: 250
      };
      let value = '<h3><a href="#" rel="noopener noreferrer nofollow"><em><strong>Profile Of User:</strong></em></a></h3><p></p><p>{{user}}</p>';
      let allKeys = Object.keys(valueMap);
      allKeys.forEach((key) => {
        var myRegExp = new RegExp('{{' + key + '}}','i');
        value = value.replace(myRegExp, valueMap[key]);
      });
      return value;
    }
  }
1
Lim Socheat 2020-01-17 21:10.

J'ai trouvé la réponse. J'espère que cela aidera quelqu'un à l'avenir.

Poste d'origine: https://forum.vuejs.org/t/evaluate-string-as-vuejs-on-vuejs2-x/20392/2

VueJS - Interpole une chaîne dans une chaîne

 <template>
        <v-container>
            <v-card>
                <v-card-title>Print</v-card-title>
                <v-divider></v-divider>
                <v-card-text v-html="parse(content)"></v-card-text>
            </v-card>
        </v-container>
    </template>

    <script>
    export default {
        data() {
            return {
                hello: "HELLO DATA",
                user: "Lim Socheat",
                content: ""
            };
        },

        methods: {
            getLayout() {
                this.$axios .$get("/api/layout/reciept", {
                        params: {
                            type: "reciept"
                        }
                    })
                    .then(response => {
                        this.content = response.content;
                    })
                    .catch(error => {
                        this.$toast.error(error); }); }, evalInContext(string) { try { return eval("this." + string); } catch (error) { try { return eval(string); } catch (errorWithoutThis) { console.warn( "Error en script: " + string, errorWithoutThis ); return null; } } }, parse(string) { return string.replace(/{{.*?}}/g, match => { var expression = match.slice(2, -2); return this.evalInContext(expression); }); } }, computed: { id() { return this.$route.params.id;
            }
        },

        watch: {
            id: {
                handler() {
                    this.getLayout();
                },
                immediate: true
            }
        }
    };
    </script>
Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Related questions

MORE COOL STUFF

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Jana Duggar : Tout ce qu'elle a dit sur l'amour et sa fenêtre de 5 ans pour trouver le « bon »

Jana Duggar a été ouverte sur sa recherche de l'amour. Voici tout ce qu'elle a dit sur le sujet et sa fenêtre de mariage de cinq ans.

2023-06-12.

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

Sam Heughan sait exactement ce qu'il retirera de l'ensemble "Outlander" - "J'ai l'impression d'être Jamie quand je les mets"

La star d'Outlander, Sam Heughan, a récemment révélé ce qu'il retirera du tournage pour se souvenir de Jamie Fraser, le rôle qui a fait de lui une star.

2023-06-12.

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

La première chanson des Beatles qui était l'une des " performances les plus excitantes " du groupe, selon un initié de Fab Four

"She Loves You" a été écrite en une heure, enregistrée en une journée, et a été la chanson des Beatles avec l'une de leurs meilleures performances de leur carrière.

2023-06-11.

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Dolly Parton a aidé sa grand-mère "invalide" alors qu'aucun des autres petits-enfants ne le ferait - elle lui faisait aussi des blagues

Dolly Parton et sa grand-mère Bessie avaient une relation spéciale. Grand-mère Parton était très malade, mais cela n'a pas empêché Dolly de lui faire des farces.

2023-06-11.

Les origines de l'islam : une histoire religieuse

Les origines de l'islam : une histoire religieuse

Les origines de l'islam remontent au début du VIIe siècle dans la péninsule arabique. L'islam a débuté dans la ville de La Mecque, où un homme nommé Mahomet, un marchand prospère issu d'une puissante tribu, reçut une révélation divine.

2025-12-03.

Quel est le bois le plus dur au monde ?

Quel est le bois le plus dur au monde ?

Vous pensez peut-être que le chêne ou le noyer sont résistants, mais en matière de bois les plus durs au monde, ils sont loin derrière.

2025-10-29.

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

10 des créatures marines les plus terrifiantes qui rôdent dans les profondeurs de l'océan

L'océan regorge de beauté, mais il abrite aussi certaines des créatures marines les plus terrifiantes de la planète. Nombre de ces animaux vivent dans les profondeurs obscures et sous haute pression des abysses.

2025-10-29.

Les 10 meilleurs enchantements d'épée dans Minecraft

Les 10 meilleurs enchantements d'épée dans Minecraft

Que vous affrontiez des créatures hostiles ou vous prépariez pour des affrontements PvP, connaître les meilleurs enchantements d'épée dans Minecraft peut vous donner un avantage considérable. Enchanter vos épées vous permet d'infliger plus de dégâts, d'augmenter le butin des créatures et d'accroître leur durabilité.

2025-10-29.

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

Récapitulatif de The Bear : Marcus est-il l'homme le plus gentil, le plus doux et le plus sincère de Chicago ?

« Enfants » laisse tomber un caméo de grand nom et des nouvelles dévastatrices

2024-07-03 19:12.

À 9 800 $, voudriez-vous les emballer dans ce Toyota RAV4 2008 à sept places ?

À 9&nbsp;800&nbsp;$, voudriez-vous les emballer dans ce Toyota RAV4 2008 à sept places&nbsp;?

Ce RAV4 est déclaré en excellent état et est prêt pour un jeu de chaises musicales.

2024-07-03 19:04.

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Une camionnette de livraison Amazon s'enflamme dans une explosion ardente pendant la chaleur estivale de Houston

Des images de drones ont montré des pompiers semblant lutter pour éteindre l'incendie.

2024-07-03 19:04.

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

Le spectacle Black Panther de Marvel sera le spectacle d'animation le plus crucial à ce jour

Eyes of Wakanda est directement lié au MCU, ainsi que des mises à jour sur X-Men '97, What If..., Daredevil, et plus encore.

2024-07-03 19:03.

Anna Wintour quitte son poste de rédactrice en chef de Vogue après 37 ans — et elle recrute !

Anna Wintour quitte son poste de rédactrice en chef de Vogue après 37 ans — et elle recrute !

La rédactrice en chef de longue date, qui a rejoint Vogue américain en 1988, a annoncé la nouvelle lors d'une réunion du personnel le jeudi 26 juin au matin.

2025-06-27.

Le pape François décède à 88 ans des suites de problèmes de santé.

Le pape François décède à 88 ans des suites de problèmes de santé.

Le pape François, chef de l'Église catholique et chef spirituel des quelque 1,3 milliard de catholiques à travers le monde, est décédé. Il avait 88 ans.

2025-04-21.

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

L'histoire de rencontres d'Ava Gardner : retour sur les mariages et les romances de l'icône hollywoodienne

Ava Gardner a été mariée à Mickey Rooney et Frank Sintra, et a fréquenté plusieurs autres stars d'Hollywood. Voici un aperçu de l'histoire amoureuse d'Ava Gardner.

2024-06-23.

Qui est la femme de John Cleese ? Tout sur Jennifer Wade

Qui est la femme de John Cleese ? Tout sur Jennifer Wade

John Cleese a épousé sa femme, Jennifer Wade, en 2012. Voici tout ce qu'il faut savoir sur la femme de John Cleese, Jennifer Wade.

2024-06-16.

les pronoms font super peur

Ça me frappe tout à coup, comme c'est si souvent le cas C'est à nouveau le milieu du chemin <Non, pas celui du Pacifique, toi marron, celui du carnaval> Chaque gros titre fort… ..

3 façons éprouvées d'améliorer vos compétences en écriture

Les avantages de l'écriture et les stratégies pour vous aider à le faire

3 façons éprouvées d'améliorer vos compétences en écriture

En 2022, avec la sortie de GPT-3, la compétence en écriture semble devenir moins importante. Avec l'IA, les personnes ayant une mauvaise écriture peuvent également générer du personnel de qualité.

L'érosion lente : dévoiler les façons dont les gens perdent leur carrière

L'érosion lente&nbsp;: dévoiler les façons dont les gens perdent leur carrière

Dans le monde rapide et compétitif d'aujourd'hui, la carrière d'une personne joue un rôle important dans la croissance personnelle, la stabilité financière et la satisfaction globale de la vie. Cependant, de nombreuses personnes se retrouvent prises dans un cycle incessant de stagnation et d'insatisfaction, dépérissant progressivement dans leur vie professionnelle.

Qu'est-ce qui rend un podcast influent ?

Qu'est-ce qui rend un podcast influent&nbsp;?

La semaine dernière, j'ai remarqué un communiqué de presse, envoyé via PressGazette (un site Web d'information britannique). L'article annonçait qu'Acast, la société d'hébergement et de publicité de podcasts de Scandi, dirigerait un consortium d'éditeurs "probablement les plus influents" du podcasting.

Language

Japanese
Spanish
German
French
Thai
Portuguese
Russian
Vietnamese
Italian
Korean
Turkish
Indonesian
Polish
Hindi