I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so I attempted the following:
HTML
<div class="row">
<h1 class="text-center title"></h1>
<div class="col-md-offset-1 col-md-10">
<div :class="progressYou">asd</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div :class="progressMonster">asd</div>
</div>
</div>
CSS
.progressYou{
width: '100px';
background-color: 'green';
height: '50px';
}
.progressMonster{
width: '100px';
background-color: 'green';
height: '50px';
}
Javascript
new Vue({
el: '#monsterGame',
data: {
incrementMonster: 0,
incrementYou: 0,
progressMonster: {
'width': '100px',
'background-color': 'green',
'height': '50px'
},
progressYou: {
'width': '100px',
'background-color': 'green',
'height': '50px'
}
}
})
Does the CSS file need to be linked? Essentially, I want to create a class in my CSS and dynamically alter it using the objects defined in the JavaScript data section, but nothing is appearing on the screen. What could be the issue here?