CMS (eigenes Element) computed Rückgabe-Wert als HTML darstellen

Shopware 6 (German) Programmierung
1 
 Hallo zusammen, in der index.js eines (von mir erstellten) CMS-Elementes gibt es die **computed** Sektion: 

computed: {
    hText() {
        return this.element.config.hText.value;
    },
    hType() {
        return this.element.config.hType.value;
    },
    gotIt(){
        let type = this.element.config.hType.value;
        let text = this.element.config.hText.value;
        return ""+text+""+type+">";
    }
}

Wenn ich innerhalb der zum Element gehörigen COMPONENT twig-Datei gotIt einsetze 

  

Headline Text: {{ hText }}
Headline Type: {{ hType }}
{{ gotIt }}

 Ist meine Ausgabe: 

Headline Text: Enter text...

Headline Type: h1

Enter text...

Diese Ausgabe befindet sich im Backend bei der Konfiguration eines Shopping Experiences Layouts. Es handelt sich sowohl um einen eigens entwickelten Block und ein dazugehöriges Element.

Ich hätte aber gerne, dass mein Enter text… jetzt ein h1-Element ist und frage mich derzeit, wie ich dies umsetzen kann.
Ich habe recherchiert und bin über den raw-Filter gestolpert und dachte erstmal: „Das ist genau was ich brauche.“ Allerdings klappt es nicht mit 

{{ gotIt | raw}}

Überhaupt musste ich feststellen, dass ich hier keine Filter verwenden kann. In speziell dieser Twig Datei kann ich nichtmal Variablen nutzen. Beispielsweise funktioniert hier ein simples {{set x = „hi“}} nicht, sondern führt dazu, dass das gesammte Backend nicht mehr geladen werden kann.

Hoffentlich hat Jemand eine Idee, vielen Dank Jonas

2

Hallo,

siehe VueJs - Templating, speziell: Template Syntax — Vue.js , also:

Using v-html directive:

In der Administration wird soweit ich weiß Twig nur für das Blocksystem verwendet, deshalb wirst du dort auch keine Twig - Filter und ähnliches nutzen können sondern stattdessen alles mit VueJs lösen (müssen). Im Prinzip lässt sich aber auch alles, was du mit Twig lösen kannst, auch mit VueJs lösen.

Grüße

Sebastian

1 „Gefällt mir“
3

Ich kann dabei auch nur empfehlen dir auch mal Component-Renderer von Vue anzuschauen:

Damit kannst du dynamisches Component-Renderin auch sauber abbilden :) 

1 „Gefällt mir“
4

Richtig gut von euch! Bin begeistert. “works like a charm”