Utilizing icons with vuetify's v-select component: a guide

In the code snippet below, I am using a v-select element to display a list of items filled from an array:

<v-select v-model="myModel"
   :items="users"
   chips
   :readonly="!item.Active"
   label="Required users to finalize"
   item-text="NAME"
   item-value="ID"
   multiple
   filled
   return-object
>
</v-select>

The array contains the following data:

[{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false} ]

I want to customize the appearance of the v-select chips by adding a checkmark next to active users. The desired v-chip structure is as follows:

<v-chip
   class="ma-2"
   color="teal"
   text-color="white"
>
   <v-avatar left>
      <v-icon>mdi-checkbox-marked-circle</v-icon>
   </v-avatar>
</v-chip>

Is it possible to integrate a v-chip with an icon in this v-select component?

javascriptvue.jsvuetify.js

Answer №1

Give this a shot :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    users: [{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false}],
  }),
})
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0b08183d4f5305">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d5d6c6d7cac5dae3918d958d95">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="addbd8c8d9c4cbd4ed9f839b">[email protected]</a>/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c7cecfd5e1978fd9">[email protected]</a>/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-select
                :items="users"
                label="Required users to finalize"
                item-text="NAME"                                               item-value="ID"
                multiple
                filled
                chips
                return-object
                >
        <template #selection="{ item }">
          <v-chip
                  v-if="item.IS_ACTIVE"
                  class="ma-2"
                  color="teal"
                  text-color="white"
                  >
            <v-avatar left>
              <v-icon>mdi-checkbox-marked-circle</v-icon>
            </v-avatar> {{ item.NAME }}
          </v-chip>
        </template>
      </v-select>
    </v-container>
  </v-app>
</div>

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

Tips for sending an array of input field values through an Ajax request

In my current web form, there is a dynamic option that adds rows with the same attributes. These rows need to be submitted through an Ajax call to my PHP for insertion into the database. Access: <tr> <td><input type"text" name="access[nam ...

javascriptjqueryhtml

What is the limitation of including a string constant with "</script>" inside a <script> block?

I am genuinely curious about this: I thought that the following code would be valid within an HTML document: <script> var test = "<script>why? </script>"; </script> However, it turns out that this leads to an "unterminated str ...

javascripthtml

The specified type '{ children: Element; ref: MutableRefObject<HTMLDivElement>; }' cannot be matched with type 'IntrinsicAttributes & RefAttributes<HTMLDivElement>' in the assignment

Encountering an issue with fowardRef in ReactJS where everything seems fine, but an error pops up: Type '{ children: Element; ref: MutableRefObject<HTMLDivElement>; }' is not assignable to type 'IntrinsicAttributes & SectionContent ...

javascriptreactjstypescriptjsx

How to Send a JavaScript Array to a JSP Endpoint

I'm in the process of creating a web application that interacts with another website through a JS API. I would like to incorporate an array of JSON objects obtained from this API into my Java Application. Is there any way to submit this array, perhap ...

javascriptarraysjsonjsp

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...

javascriptvue.jsfrontendvue-routervue-composition-api

In Reactjs, the specified property title is not found within the string type

Currently, I am working with Reactjs and using the nextjs framework. I have encountered an issue while fetching data where I am receiving an error message stating "Property 'title' does not exist on type 'string'". How can I r ...

javascriptreactjsnext.js

Switching <div></div> to inline-block doesn't seem to have any effect (repl.it provided)

Could someone assist me with changing the div element to an inline block? I've been having trouble with it. For reference, here is my repl.it: https://repl.it/repls/AwareContentTechnician ...

javascript

"Learn how to smoothly navigate back to the top of the page after a specified amount of time has

Just starting out with JS, CSS, and Stack Overflow! I'm currently working on a div box that has the CSS property overflow: auto. Is it possible to make the box automatically scroll back to the top after a certain amount of time when the user scrolls ...

javascriptjquery

Utilize the Material UI feature to call the function

How can I pass a function as a prop to my Material UI component if the function is undefined within the component? import React, { Component } from 'react'; import styled from 'styled-components'; import InputBase from '@material- ...

javascriptreactjsmaterial-ui

Connect various models together, or create synchronized computed properties

At times, the model abstraction may fall short, leading to the necessity of synchronizing two different models. For instance, I have two lists linked by an angular sortable, which requires a model structure like this: left = [{name:"one"}, {name:"two"}]; ...

javascriptangularjs

What is the best way to manage div visibility and sorting based on selections made in a select box?

Explaining this might get a bit confusing, but I'll do my best. In my setup, I have two select boxes and multiple divs with two classes each. Here is what I am trying to achieve: When an option is selected, only the divs with that class should be ...

javascriptjqueryselecthideshow

Automated tool for generating random JSON objects

Looking for a tool that can generate random JSON objects? I'm in need of one to test my HTTP POST requests and incorporate the random JSON object into them. Any recommendations? ...

javascriptjson

having trouble compiling a react js file with webpack

One of my files, app.js, contains the following code snippet: handlePageClick = (data) => { let selected = data.selected; let offset = Math.ceil(selected * this.props.perPage); this.setState({offset: offset}, () => { this.setStat ...

javascriptreactjs

What is the most efficient way to clear the input field in Angularjs when the backspace or delete keys are pressed?

Is there a way to reset an input field with AngularJS when the backspace or delete keys are pressed? I've implemented this fantastic directive, and it's been working great, except for when the user uses the backspace or delete key to clear the f ...

javascriptangularjsvalidationfielddirective

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements b ...

javascripthtmlcssreactjsaccessibility

What is the best approach for creating a Pagination component in React JS?

I recently started developing a web-app and I'm still learning about web development. I have received a backend response in JSON format with pagination information included: { "count": 16, "next": "http://localhost:800 ...

javascriptreactjsreact-nativepagination

Is there a way to customize the total time out for the v-progress-loader-circular?

After attempting to adjust the time value to 30 seconds and then resetting it, I found that the circular progress would always stop at 100. My goal is for it to count up to 30, with 30 being the maximum count. Even though I did manage to reset it after 30 ...

javascriptvue.jsvuetify.js

Considering the switch to Vue 3?

Currently working on a Vue 2 project, I recently discovered that Vue 3 was released in September. I'm now eager to explore the process of upgrading from Vue 2 to Vue 3. Are there any specific guides available for this migration? In case there isn&apos ...

vue.jsvuejs2vuejs3

Tips on displaying a selected choice | Utilizing Material UI Autocomplete

I have successfully fetched data from an API and used it as options in Material UI Autocomplete. However, when I select an option and send it back to the API using a POST request, the selected category is displayed as a number (0) instead of text, as shown ...

javascriptreactjsmaterial-ui

What situations warrant the choice of an Isomorphic JavaScript application?

Recently, there has been an increase in tutorials and examples discussing Isomorphic web applications with react.js. As a beginner myself, I find it challenging to determine whether this is necessary or not. For instance, my application will primarily be ...

javascriptnode.jsreactjsreduxisomorphic-javascript