[FIXED] Why is this :class="{}" not working? vueJs

Issue

I made a really simple file which have a reactive Array of objects. ⇒ all objects have a property called checked, which is a boolean and toggles based on a checkbox. I'm iterating with a v-for="" the array of employees and rendering them on a <ul/ li. I'm trying to make a :class just for the ones who got checked, but it's throwing me a syntax error, and I'm not sure where I'm wrong and which would be the best approach. Every comment, advice will be 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: 'TerryLaw@gmail.com',
    address: 'whateverStreet 258',
    checked: checked.value
    },
    {id: 2, 
    name:'MartyClFly',
    username:'MartyMac',
    email: 'MartyMac@gmail.com',
    address: 'George Junior 300',
    checked: checked.value
    },
    {id: 3, 
    name:'Nancy Pelosi',
    username:'Drunk ho',
    email: 'drunkHo@gmail.com',
    address: 'Velbedere 400',
    checked: checked.value
    },
    {id: 4, 
    name:'Jonh Doe',
    username:'Jonny',
    email: 'JonhDoe@gmail.com',
    address: 'NobodyKnows 129',
    checked: checked.value
    },
    {id: 5, 
    name:'Candace Owens',
    username:'the greate black hope',
    email: 'Candace@gmail.com',
    address: 'Washington Str 777',
    checked: checked.value
    },
    {id: 6, 
    name:'Charles Dickens',
    username:'Charlie',
    email: 'CharlieDick@gmail.com',
    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 error is here exactly ⇒ <li / element:

Solution

Replace

<li class="li-item"
    v-for="employee in employees" :key="employee.id"
    :class="{employee.checked: isChecked}">

with

<li class="li-item"
    v-for="employee in employees" :key="employee.id"
    :class="{isChecked: employee.checked}">

Answered By - Eddy Gangloff

Answer Checked By - Mary Flores (PHPFixing Volunteer)