I have created a simple file that contains a reactive Array of objects where each object has a property called "checked" which is a boolean that toggles based on a checkbox. I am using a v-for directive to iterate through the array of employees and render them in a ul/li format. I am attempting to add a dynamic class only for the checked items, but I am encountering a syntax error. I'm not sure where I went wrong or what the best approach would be. Any comments or advice would be greatly appreciated! Here's the code:
<template>
<div class="contaier">
<h1>Employees view</h1>
<ul class="list">
<li
class="li-item"
v-for="employee in employees" :key="employee.id"
:class="{employee.checked: isChecked}"
>
<input class="checkbox" v-model="employee.checked" type="checkbox" @click="checkEmployee">
{{ employee.name }}
</li>
</ul>
</div>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
setup() {
const checked = ref(false)
const employees = reactive([
{id: 1,
name:'Terry Lawrence',
username:'TerryLaw',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="297d4c5b5b5065485e694e44484045074a4644">[email protected]</a>',
address: 'whateverStreet 258',
checked: checked.value
},
{id: 2,
name:'MartyClFly',
username:'MartyMac',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05486477717c486466456268646c692b666a68">[email protected]</a>',
address: 'George Junior 300',
checked: checked.value
},
{id: 3,
name:'Nancy Pelosi',
username:'Drunk ho',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecadcdbc0c5e6c1eec9c3cfc7c280cdc1c3">[email protected]</a>',
address: 'Velbedere 400',
checked: checked.value
},
{id: 4,
name:'Jonh Doe',
username:'Jonny',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fbb1949593bf949ebb9c969a9297d5989496">[email protected]</a>',
address: 'NobodyKnows 129',
checked: checked.value
},
{id: 5,
name:'Candace Owens',
username:'the greate black hope',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7f4d6d9d3d6d4d2f7d0dad6dedb99d4d8da">[email protected]</a>',
address: 'Washington Str 777',
checked: checked.value
},
{id: 6,
name:'Charles Dickens',
username:'Charlie',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dcee5ecffe1e4e8c9e4eee6cdeae0ece4e1a3eee2e0">[email protected]</a>',
address: 'chickenNutso 678',
checked: checked.value
}
])
const checkEmployee = (event) => {
try {
for (const employee of employees) {
if (event.target.id !== employee.id) {
checked.value = true
}}
} catch (error) {
console.error(error)
}
}
return {
employees,
checkEmployee,
}
}}
</script>
<style scoped>
.list {
width: 60%;
margin-inline: auto;
padding: 1em;
list-style: none;
}
.li-item {
padding: .5em;
border: 1px solid black;
}
.checkbox {
float: left;
}
.isChecked {
background-color: rgb(191, 236, 122);
}
</style>
The issue specifically lies here with the <li / element: https://i.sstatic.net/ljaMb.png