Vue inlineStyle

[Hendoul]

Hi

Ich bin grad dabei einen VueJs Anfängerkurs anzuschauen.

<input type="text" v-model="userBackgroundColor" />
{{userBackgroundColor}}
<p :style="{backgroundColor: userBackgroundColor}">my background color</p>

const app = Vue.createApp({
  data() {
    return {
      userBackgroundColor: '',
    };
  },
});

app.mount('#assignment');

userBackgroundColor wird zwar ausgegeben bei {{userBackgroundColor}}, aber es wird nicht in das Style Attribut geschrieben und ich verstehe nicht warum. Was mache ich falsch?

 

[Tobias0]

Das wird vermutlich als einzelnes Char interpretiert und damit nicht erlaubt sein. Probier mal "".

 

[Hendoul]

Omg, jetzt habe ich es gefunden. Es funktioniert nur wenn man einen korrekten Farbwert eingibt. Vue (oder der Browser?) macht da anscheinend irgendeine Validierung im Hintergrund. Hat mich jetzt bloss 30min meines Lebens gekostet

 

[Tobias0]

My fault, ich dachte, es läge an dem (vermeintlichen) leeren Zeichen.