1👍
EDIT based on your comment @martin0300
Firstly, you need to wrap the division in another division whose id must be test. Vue does not consider the container element (div with id test
) as part of the app and does not process any directives. Left a references below that mentions this.
https://vuejs.org/guide/essentials/application.html#mounting-the-app
So please change your markup to something like this for applying the value from getClass method…
<div id="test">
<div :class="getClass()">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
</div>
…or this way for using the computed property approach (explained below.)
<div id="test">
<div :class="testClass">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
</div>
—
Original message:
getClass
when defined as a method needs to be called, and the returned value ("testcolor"
) is set as the value of :class. Note the function call getClass()
in place of the getClass
you used.
<div id="test" :class="getClass()">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
That said, this is not the preferred way to apply classes conditionally. We prefer a computed property over of a method. A method is invoked on every render, whereas a computed property is recomputed only when the underlying reactive data it depends on changes (in this case the computed property testClass
depends on the reactive property testvalue
.
The idiomatic Vue code in your case would be the following. Note that computed properties are not invoked like functions since they are internally implemented using accessor methods / using a JS Proxy (:class="testClass"
and NOT :class="testClass()"
). I believe this difference between the way methods and computed properties are used is the cause of your confusion.
<div id="test" :class="testClass">
<h1>Test stuff</h1>
<h2>{{ testvalue }}</h2>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3.2.19/dist/vue.esm-browser.js";
createApp({
data() {
return {
testvalue: true,
};
},
computed: {
testClass() {
console.log("Recomputed testClass");
return this.testvalue ? "testcolor" : "";
},
},
}).mount("#test");
</script>