I am currently developing a basic TODO application. Within my index.html file, I have a main div with the id #app. Inside this div, there is another div with the class .todobox where I intend to display different tasks stored in my main.js file. Each task has a specific property called varStyle, which is meant to customize each .todobox accordingly. The purpose of this customization is to show completed tasks with a grey background and incomplete tasks with a red one.
Issue: Regardless of the type of varStyle I define, all tasks are displayed with the same styling as the main .todobox. Interestingly, there are no significant errors showing up in the console.
Any suggestions on how to resolve this problem would be greatly appreciated. Thank you in advance!
var todo = new Vue({
el: '#app',
data: {
styleundone: {
backgroundColor: 'crimson',
},
styledone: {
textDecoration: 'line-through',
backgroundColor: 'gray'
},
variants: [
{
varID: 2333,
varDesc: 'Create a new instance',
varStyle: this.styledone
},
{
varID: 2345,
varDesc: 'Boot up the computer',
varStyle: this.styledone
},
{
varID: 2787,
varDesc: 'Open Google Chrome',
varStyle: this.styledone
}
],
}
})body {
margin: 0
}
#app {
margin: 2%;
justify-content: center;
align-items: center;
}
.header {
height: 100px;
background: linear-gradient(90deg, rgba(162,148,203,0.7651435574229692) 0%, rgba(228,147,205,1) 50%, rgba(169,163,214,0.7035189075630253) 100%);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.todobox {
display: inline-block;
border: 2px black solid;
border-radius: 5%;
color: white;
margin-left: 2rem;
margin-top: 2rem;
-webkit-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
-moz-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.todobox:hover {
cursor: pointer;
}
.todobox:active {
box-shadow: none;
transition: all 0.3s
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=devide-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>ToDo List</title>
</head>
<body>
<div class="header">
<h1>Todo List</h1>
</div>
<div id="app">
<div class="todobox"
v-for="variant in variants"
:key="variant.varID"
:style="variant.varStyle">
<p>{{ variant.varDesc }}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/main.js"></script>
</body>
</html>