What is the reason this :class="{}" is not functioning properly in Vue.js?

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

Answer №1

Revise

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

with

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for interacting with an embedded alert using SeleniumIDE?

When working with HTML, I came across the following code snippet (it's not from my website): <script> alert('1'); </script> My challenge now is to test this code using Selenium IDE and ensure that the alert will be clicked. How ...

Using a variable in a Joomla module to create a JavaScript object with PHP

I am currently developing a Joomla module that features a progress bar utilizing the ProgressBar.js plugin. Since this module is designed to load multiple objects on a single page, hardcoding the IDs of these objects is not feasible. To address this, I uti ...

Receiving an `Invalid module name in augmentation` error is a common issue when using the DefaultTheme in Material

After following the guidelines outlined in the migration documentation (v4 to v5), I have implemented the changes in my theme: import { createTheme, Theme } from '@mui/material/styles' import { grey } from '@mui/material/colors' declar ...

What steps can I take to resolve the issue of item display in the dropdown menu?

My objective is to have a dropdown list with "title 1234" appearing first. When this option is selected, its value should be 1234. How can I achieve this? Here is the desired outcome: https://i.sstatic.net/CqWgn.png Currently, the list looks l ...

- "Queries about Javascript answered with a drop-down twist

Having some trouble with setting up a straightforward FAQ dropdown feature. Could someone lend a hand and see what might be going wrong? Appreciate your help! CSS #faqs h3 { cursor:pointer; } #faqs h3.active { color:#d74646; } #faqs div { height:0; o ...

Reducing file size through compression (gzip) on express js version 4.4.1

My express js app is functioning as a web server, but I am having trouble with serving unzipped static content (js and css files). I have tried using compression from https://github.com/expressjs/compression, but it doesn't seem to be working for me. ...

Web2py exhibits varying behavior between local and online versions, where it executes server code but results in a 404 error

When I run the request on my local version of the application using the code below, it successfully executes on the server. $.ajax({ type: 'POST', url: "{{=URL('default', 'serverFunction.json')}}", data: {id: id} }); Howe ...

Saving MongoDB query results to a file using the built-in Node.js driver

I have been attempting to save the output of a MongoDB query to a file using the native Node.js driver. Below is my code (which I found on this post: Writing files in Node.js): var query = require('./queries.js'); var fs = require('fs' ...

Create a JavaScript array by extracting IDs from an HTML document

Looking to create a function that randomly selects an image defined in HTML code. I've opted to create an array to store all used images and have the function pick from there. Is there a simpler way to define the array or should I skip using it altog ...

The foundation grid system is not being implemented

How come my div is not affected by the foundation grid system: render: function(){ var {todos,showCompleted,searchText} = this.state; var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText); return ( <div> ...

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

After researching about the @Input() and @Output() decorators, I discovered that we have the option to use an alias instead of the property name for these decorators. For example: class ProductImage { //Aliased @Input('myProduct') pro ...

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

I am a beginner with Angular 6 and I'm trying to implement functionality where clicking a button or icon will change a text field into an input field. See the snippet of code and expected output below. Thank you in advance. <div> <mat-for ...

The absence of the object's shadow is conspicuously noticeable - three.js

View Screenshot Hey there! I recently exported a 3D model tree from Blender and everything seemed to have gone smoothly, but I encountered an issue. The shadow appears on the trunk and branches, however, it is not reflecting properly. Could this be due to ...

Tips for positioning the title of a card in Bootstrap-Vue

I'm currently working with the <b-card> component from bootstrap-vue and encountering an issue where I am unable to center align the title property. Does anyone have a solution for this problem? Below you can find the structure of my card, which ...

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

I am struggling with creating a list of items that, when clicked, should take me to the corresponding post. Despite trying to use ng-click in the header, I suspect there is an issue with the route not functioning properly. As part of my testing process, I ...

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

.ajax() triggers a page refresh upon pressing the ENTER key

Utilizing Ajax to update the database with a new folder leads to page refresh when hitting ENTER. On the form, I have onkeypress="if(event.keyCode==13) savefolder();". Below is the Javascript code where pressing enter calls savefolder function that sen ...

Communication between clients using a Progressive Web Application (PWA) when

Is there an efficient way to communicate and share data between devices using an offline progressive web app without internet access? I thought of exploring the possibilities with the Web Bluetooth API and generating QR codes through libraries like QRCode ...

Tips for enhancing the appearance of a React component

I have a redux form that doesn't look great, and I would like to style it. However, my project uses modular CSS loaders. The styling currently looks like this: import styled from 'styled-components'; const Input = styled.input` color: #4 ...

Error message received when calling a function within a Vue watcher states "function is not defined"

My goal is to trigger a function in a Vue component when a prop changes using a watcher: props: [ 'mediaUrl' ], watch: { mediaUrl: function() { this.attemptToLoadImage(); } }, medthods: { attemptToLoadImage: function() { console ...