web-dev-qa-db-fra.com

Comment gérer lorsque les propriétés calculées VueJS renvoient du code HTML?

J'utilise VueJS 2 pour rendre et calculer les éléments du formulaire. Maintenant, je dois montrer un nombre si une propriété est inférieure à 10, et j'ai besoin d'afficher un message texte si la propriété est supérieure ou égale à 10.

J'utilise ce code:

Vue.component('mycomponent', {
    template: '#mytemp',
    data: function() {
        // ...
    },
    computed: {
         mycomputedprop: function() {
             if (this.model_a < 10) {
                 return '<span class="numbervalue">' + this.model_a + '€</span>';
             } else {
                 return '<span class="textvalue">I\'ll contact you as soon as possible!</span>';
             }
         }
    }
});

J'utilise ce code pour afficher la valeur:

<div id="app">
    {{ mycomputedprop }}
</div>

Le problème est: si je montre cette valeur, elle montre le code HTML sous forme de texte, pas sous forme de HTML. Comment afficher la valeur retournée sous forme de code HTML?

vue.jsvuejs2vue-component
11
netdjw

Vous pouvez utiliser v-html

Document: Raw-HTML

<div id="app">
 <div v-html="mycomputedprop"></div>
</div>

Le contenu de ce div sera remplacé par la valeur de la propriété rawHtml, interprétée comme du HTML simple - les liaisons de données sont ignorées. Notez que vous ne pouvez pas utiliser v-html pour composer des partiels de modèle, car Vue n'est pas un moteur de modèle basé sur des chaînes. Au lieu de cela, les composants sont préférés comme unité fondamentale pour la réutilisation et la composition de l'interface utilisateur.

24
Mohammad b

En supposant que modal_a est défini dans les données de votre composant, pourquoi ne pas gérer cela dans le modèle de composant?

  <div id="app">
    <span v-if="model_a < 10" class="numbervalue">{{model_a}} €</span>
    <span v-else class="textvalue">I\'ll contact you as soon as possible!</span>
  </div>
6
Djurdjen