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

**URL:** <https://forum.shopware.com/t/cms-eigenes-element-computed-ruckgabe-wert-als-html-darstellen/71423>\
**Category:** Programmierung\
**Created:** [8. Dezember 2020 um 07:04 UTC](https://forum.shopware.com/t/cms-eigenes-element-computed-ruckgabe-wert-als-html-darstellen/71423 "2020-12-08T07:04:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![t4ce](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@t4ce](https://forum.shopware.com/u/t4ce)\
**Post date:** [8. Dezember 2020 um 07:04 UTC](https://forum.shopware.com/t/cms-eigenes-element-computed-ruckgabe-wert-als-html-darstellen/71423/1 "2020-12-08T07:04:58Z")

</div>

```
 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&nbsp;

```
 &nbsp;

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&nbsp;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:&nbsp;„Das ist genau was ich brauche.“ Allerdings klappt es nicht mit&nbsp;

{{ 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

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [8. Dezember 2020 um 08:20 UTC](https://forum.shopware.com/t/cms-eigenes-element-computed-ruckgabe-wert-als-html-darstellen/71423/2 "2020-12-08T08:20:48Z")

</div>

Hallo,

siehe VueJs - Templating, speziell:&nbsp;[Template Syntax — Vue.js](https://vuejs.org/v2/guide/syntax.html#Raw-HTML) , 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

---

<div class="post-metadata">

**Author:** ![mbrode](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/mbrode/32/26080_2.png) [@mbrode](https://forum.shopware.com/u/mbrode)\
**Post date:** [8. Dezember 2020 um 09:07 UTC](https://forum.shopware.com/t/cms-eigenes-element-computed-ruckgabe-wert-als-html-darstellen/71423/3 "2020-12-08T09:07:00Z")

</div>

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

> **[Render Functions & JSX — Vue.js](https://vuejs.org/v2/guide/render-function.html)**
>
> Vue.js - The Progressive JavaScript Framework

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

---

<div class="post-metadata">

**Author:** ![t4ce](https://avatars.discourse-cdn.com/v4/letter/t/839c29/32.png) [@t4ce](https://forum.shopware.com/u/t4ce)\
**Post date:** [9. Dezember 2020 um 08:38 UTC](https://forum.shopware.com/t/cms-eigenes-element-computed-ruckgabe-wert-als-html-darstellen/71423/4 "2020-12-09T08:38:52Z")

</div>

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