Within my HTML, there is an <input> element that has the ability to change the background color of a <p> through an inline style. I conducted an experiment using two different methods to apply the style, and I encountered a peculiar behavior: when I type "blue," both paragraphs turn blue. However, if I then press the backspace key, Paragraph 2 remains blue until the input field is either empty or contains another valid color (e.g., backspacing from "yellowgreen" to "yellow"), which strikes me as odd. On the other hand, Paragraph 1 behaves as expected: if the input is not a valid color, it remains unstyled.
I suspect that this behavior is related to how Vue transforms a "style object" into actual CSS styles. Can someone explain how this process works? (Just to clarify: I am a complete beginner to Vue.js)
HTML:
<section id="assignment">
<input type="text" v-model="bgc" />
<p :style="bgcInlineStyle">Paragraph 1</p>
<p :style="{backgroundColor: bgc}">Paragraph 2</p>
</section>
JS:
const app = Vue.createApp({
data() {
return {
bgc: "",
};
},
computed: {
bgcInlineStyle() {
return `background-color:${this.bgc};`;
},
},
});
app.mount("#assignment");