I'm having trouble passing the variable showAlert1 from the object alertObj. In the code snippet below, only #3 seems to work. Can anyone explain why this is happening?
Additionally, I am curious about how #3 works. Does it retrieve the first boolean variable from the object?
PS. It's a bit confusing that StackOverflow doesn't include Vue as an option for code highlighting. If anyone knows how to properly import it, please share!
var app = new Vue({
el: '#app',
data: {
alertObj: [{
showAlert1: true
}]
}
})
.alert {
background-color: yellow;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fffcecc9bba7bca7b8be">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<div v-bind:class="{alert:alertObj.showAlert1}">#1</div>
<div v-bind:class="{alert:showAlert1}">#2</div>
<div v-bind:class="{alert:alertObj}">#3</div>
</div>