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 >
        <h1>Employees view</h1>
        <ul >
            <li
             
            v-for="employee in employees" :key="employee.id" 
            :
            >
                <input  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: '[email protected]',
    address: 'whateverStreet 258',
    checked: checked.value
    },
    {id: 2, 
    name:'MartyClFly',
    username:'MartyMac',
    email: '[email protected]',
    address: 'George Junior 300',
    checked: checked.value
    },
    {id: 3, 
    name:'Nancy Pelosi',
    username:'Drunk ho',
    email: '[email protected]',
    address: 'Velbedere 400',
    checked: checked.value
    },
    {id: 4, 
    name:'Jonh Doe',
    username:'Jonny',
    email: '[email protected]',
    address: 'NobodyKnows 129',
    checked: checked.value
    },
    {id: 5, 
    name:'Candace Owens',
    username:'the greate black hope',
    email: '[email protected]',
    address: 'Washington Str 777',
    checked: checked.value
    },
    {id: 6, 
    name:'Charles Dickens',
    username:'Charlie',
    email: '[email protected]',
    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:

CodePudding user response：

Replace

<li 
    v-for="employee in employees" :key="employee.id"
    :>

with

<li 
    v-for="employee in employees" :key="employee.id"
    :>