Guide on updating the checkbox color scheme for a select component in Vuetify version 3

I am encountering an issue with the select component in Vuetify 3 (multiple mode). Specifically, I need to change the color of the checkboxes. Despite setting the color prop to red in my code, the checkboxes are still displaying as black. How can I go about fixing this problem?

For reference, here is the link to my code snippet on CodePen: https://codepen.io/Sneaky6666/pen/RwJEePM?editors=101

<script type="text/x-template" id="app-template">
  <v-app>
    <v-select
      v-model="select"
      :hint="`${select.state}, ${select.abbr}`"
      :items="items"
      item-title="state"
      item-value="abbr"
      label="Select"
      persistent-hint
      return-object
      single-line
      multiple
      color="red"
    ></v-select>
  </v-app>
</script>

<div id="app"></div>

JS:

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data () {
    return {
      select: { state: 'Florida', abbr: 'FL' },
      items: [
        { state: 'Florida', abbr: 'FL' },
        { state: 'Georgia', abbr: 'GA' },
        { state: 'Nebraska', abbr: 'NE' },
        { state: 'California', abbr: 'CA' },
        { state: 'New York', abbr: 'NY' },
      ],
    }
  },
}).use(vuetify).mount('#app')

Answer №1

By including props: {color:'red'} in each entry of the items array, you can specify that the checkbox and list item will be displayed in red when selected.

items: [
   { state: 'Florida', abbr: 'FL', props: {color:'red'} },
   { state: 'Georgia', abbr: 'GA', props: {color:'blue'} },
   { state: 'Nebraska', abbr: 'NE' },
   { state: 'California', abbr: 'CA' },
   { state: 'New York', abbr: 'NY' },
],

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

Choose an option from the dropdown menu when clicking on the radio button

My issue involves a drop-down menu along with two radio buttons, each with two values: jQuery('input[type=radio][name=radio_type]').change(function(e) { var value = jQuery(e.target.value); jQuery('select[name="optType"] option:selecte ...

Attempting the how-to-npm exercise, however, unable to locate the designated directory for the task

You can access the how-to-npm guide on GitHub by visiting: https://github.com/workshopper/how-to-npm https://i.sstatic.net/nyjrk.png ...

Converting JavaScript numbers into years and months format

Given an integer, for example 20, I am trying to calculate how many months and years are represented by that number. For 20, the result would be 1 year and 8 months. How can this be achieved using JavaScript? switch (props.term) { case (props.term ...

Rebalancing Rotation with Three.js

Currently, I am utilizing Three.js and my goal is to swap out an object in the scene with a new one while maintaining the same rotation as the one I removed. To achieve this, I take note of the rotation of the object I'm removing and then utilize the ...

Stop a user from adding duplicate tasks

I have developed a JavaScript code for creating a todo list. Currently, I am working on the phase of adding tasks to the list. The user wants to ensure that if a task is entered once, it cannot be entered again. const taskInput = document.getElementById(&a ...

How can I use vanilla JavaScript to retrieve all elements within the body tag while excluding a specific div and its descendants?

My goal is to identify all elements within the body tag, except for one specific element with a class of "hidden" and its children. Here is the variable that stores all elements in the body: allTagsInBody = document.body.getElementsByTagName('*&apos ...

Sharing variables between Angular 2 components: An in-depth guide

Looking for a way to change a variable in a group of child components, I have this component for an editable form control that toggles between view states import { Component, Input, ElementRef, ViewChild, Renderer, forwardRef, ...

What is the best way to use async await to listen for an event in a child component with Vue-router?

To prevent users from unintentionally leaving an unsaved form, I am looking to implement a custom modal alert system with vue-router. Although the use of the standard browser alert box is an option, beforeRouteLeave (to, from, next) { const answer = wi ...

The HTML modal window is experiencing loading issues

I am attempting to implement a modal box that appears on click in an HTML document. The HTML code looks like this: <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> </div> <a href="#openModal">O ...

What is the best way to manage uncaught errors within the simple-peer library?

Currently integrating feross' simple-peer library and encountering an occasional error: Uncaught Error: Ice connection failed. at r._onIceStateChange at RTCPeerConnection.t._pc.oniceconnectionstatechange This error is directly from the library and ...

Is it possible to combine several m3u8 files into a single m3u8 file?

I am looking to consolidate multiple m3u8 files into a single file for seamless playback in one video player. How can I achieve this without compromising the individual clips? For instance, if I have zebra.m3u8, giraffe.m3u8, and lion.m3u8 files, is it pos ...

How to trigger a modal window from a Vue component in Laravel 9?

I'm working on a Laravel 9 application that features a Notes page. The page utilizes a Vue component ('note-component') to showcase essential details about each note. This component makes an ajax() call to retrieve note data and then uses th ...

A guide to determining the position of 3D objects in threejs and arranging them within a scene to ensure they do not intersect

Currently, I am developing a cargo planning application that involves loading cargo into containers. To achieve this, I am utilizing three.js to create a 3D model. Despite being new to three.js, I have successfully created 3D objects (cargo) and placed the ...

Encountering an issue in Laravel 8 JetStream: Mix file '/css/app.css' cannot be found when running npm run prod

I have a Laravel 8 application set up with Jetstream, Inertia Js, and VueJs 3. When I execute: npm run prod An error occurs: Exception Unable to find Mix file: /css/app.css. (View: /var/www/html/mysite/resources/views/app.blade.php) http://subdomain.mysi ...

Ways to embed one block of javascript code within another block of javascript code

Can you help me with inserting the following code into a specific part of my JavaScript code? The issue I am facing is that the code contains all JavaScript, and when I directly add it, the gallery crashes. <div id='gallerysharebar'> & ...

What could be the reason behind Strapi v4 only displaying the initial 25 articles? Discussing Next.js and React

I've encountered a peculiar bug while working with Strapi v4. The technology stack being used is React and Next.js I've set up a dynamic pagination system with the format /page/[slug]. It's functioning almost perfectly, except for one majo ...

Navigate through a series of div elements using Jquery

I need help figuring out how to make the window scroll between different divs in a sequence. The issue is that my current code only works for one specific div at a time. $('.down_arrow').click(function(e){ $('html, body') ...

extract information from local storage using AngularJS

I'm having trouble getting the filter to work in my AngularJS project with local storage. Even though there are no errors, nothing happens when I type words into the input field. Can someone lend a hand? :) html: <div ng-app="myApp" ng-controller ...

Toggle the visibility of divs using jQuery for easy filtering

I am looking to enhance my filtering system by allowing users to apply and view multiple filters simultaneously. For example, I want to be able to select 'High' and 'pizza' filters and see the results that match both criteria. Currently ...

Are you experiencing issues with the .submit() function when used in conjunction with other

Currently, I am working on a survey form that incorporates JQuery to dynamically display or hide fields based on user selections. //FORM CONDITIONALS: This script is responsible for hiding all the helpfulness radios and only displaying them when "Yes" fo ...