Tips for utilizing the vuetify readonly prop while enabling the selection menu

In my project, I have a grid containing v-autocomplete components with the multiple attribute. To maintain clean formatting, I decided to show only a shortened version of the content using the selection slot feature provided below:

          <v-autocomplete
        v-model="programModel"
        multiple
        density="compact"
        variant="outlined"
        hide-details
        color="primary"
        flat
        rounded
        label="Programs"
        :items="programData"
        item-title="program_name"
        return-object
        :rules="arrayRequiredRule"
        :readonly="!editableTopSectionModel"
      >
      <template v-slot:selection="{ item, index }">
        <span v-if="!index">{{ item.title }}</span>
        <span class="grey--text caption" v-else-if="index === 1">
          &nbsp;(+ {{programModel!.length - 1}} others)
        </span>
      </template>
    </v-autocomplete>

One challenge I encountered is that I included a button in the form to toggle the editability of the v-autocompletes by changing the readonly attribute. However, when the component is set to readonly, users are unable to access the dropdown menu to view available options. I am currently exploring solutions to address this functionality issue.

Answer №1

      <v-autocomplete
        v-model="programModel"
        multiple
        density="compact"
        variant="outlined"
        hide-details
        color="primary"
        flat
        rounded
        label="Programs"
        :items="programData"
        item-title="program_name"
        return-object
        :rules="arrayRequiredRule"
        :readonly="!editableTopSectionModel"
      >
      <template v-slot:selection="{ item, index }">
        <span v-if="!index">{{ item.title }}</span>
        <span class="grey--text caption" v-else-if="index === 1">
          &nbsp;(+ {{programModel!.length - 1}} others)
        </span>
      </template>
    </v-autocomplete>

Make sure to set editableTopSectionModel to false by default and then update the flag accordingly

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

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

Creating numerous bar graphs for each specific date

I have a dataset containing dates and corresponding information for each element. Despite trying various approaches, I am unable to create a barchart. Every solution I've attempted has been unsuccessful thus far. The dataset is structured as follows ...

Updating a model within an ng-repeat directive from external sources

Within my controller, there is a repeater where each item has its own unique status: <div ng-controller="..."> <div ng-repeat"...">{{status}}</div> </div> Currently, changing the status within the repeater by using status = &apo ...

An error occurred with the authorization headers when attempting to retrieve the requested JSON

I am attempting to retrieve JSON data from the Bing Search API. Here is what I have implemented: <!DOCTYPE html> <html> <body> <p id="demo"></p> <script language="JavaScript" type="text/javascript" src="jquery-1.12.3.js"& ...

The submit button seems to be unresponsive or unreactive

As a newcomer to Angular 2 and Typescript, I am in the process of building a web application. I have created several input fields and, following user submission via a button, I want to log the inputs to the console. However, it seems like my button is not ...

Use VB.NET to dynamically update cell content in HTML

Can you assist me with updating cellContent in HTML using vb.net? The DataGrid view is on a website. Below is the inspected HTML: <div class="grid-controls"> <form method="post" class="vss-app-form grid-control-popover none" id="gridMorePopov ...

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

"Combining JSON, JavaScript, and HTML for dynamic web development

I am a junior computer programmer facing challenges with our JSON project. The objective is to store an object in local storage, but my HTML and JS code are not working as intended. It seems like nothing happens at all. Any suggestions or feedback would ...

Issue: [vuex] Modifying vuex store state through Firebase Auth Object outside of mutation handlers

I'm having trouble solving this issue after spending a few hours on it. Can anyone help me identify the problem? The error message I keep encountering reads: Error: [vuex] Do not mutate vuex store state outside mutation handlers Below is the section ...

Ways to conceal a div in React when the input or child is not in focus

My custom search and select component includes an input field and a results list enclosed in a wrapper container: <div className='wrapper'> <input /> <div className='results'> <div>Result Item</div> ...

Is the performance of `fillRect` hindered when painting on a 3D model?

Currently, I am in the process of developing a painting-type application using three.js/canvas. My goal is to enable users to paint directly onto a 3D model, updating the UV map accordingly. https://i.sstatic.net/DfMvB.png While I have achieved the desi ...

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Project Overview I am currently developing an application aimed at assisting users in finding rides. My tech stack includes Django, Python 2.7, and integration with Google Maps and Directions APIs. Within a specific view, I present a map where users can ...

JavaScript filename

This question may appear simple, but I believe the answer is not as straightforward. Here it goes: Should I keep the filename of jQuery as "jquery-1.3.2.min.js" for compatibility reasons, or should I rename it to jquery.js? In my opinion, it's best ...

Ways to insert script tag in a React/JSX document?

private get mouseGestureSettingView() { const {selectedMenu} = this.state; return ( selectedMenu == 2 ? <script src="../../assets/js/extensions/mouse-gesture/options.js"></script> <div className={styles.settingForm}& ...

What is the best method for testing routes implemented with the application router in NextJS? My go-to testing tool for this is vitest

Is it possible to test routes with vitest on Next.js version 14.1.0? I have been unable to find any information on this topic. I am looking for suggestions on how to implement these tests in my project, similar to the way I did with Jest and React Router ...

Updating the state of a different Vue component

I am in need of updating the isHidden value to true within my code split into different components: // Profile.vue <UserData v-bind:user_billing="user_billing" v-bind:user_profile="user_profile" ></UserData> <div class="col-12 px- ...

Highcharts real-time data not refreshing following modification of PHP variable

Currently, I have a live updating highchart implemented on a webpage named index.html. This highchart calls a PHP script called datatest.php to parse a CSV file, convert the data into JSON format, and then add it as a new point on the chart: $.ajax({ ...

Different techniques for retrieving elements generated by ng-repeat from their containing parent

Let's keep it simple - imagine we have a directive called headSlides. This directive's template includes an image that is being repeated using ng-repeat: <img class="bg" ng-repeat="image in images" ng-src="{{image.src}}"> I need to access ...

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

I'm currently using a simple jQuery script to switch between two thumbnails when hovering over a div. The code works perfectly for the .thumbs class, but I also want this functionality to work with the post titles. Unfortunately, adding the .headline ...

Incorrect implementation of Bootstrap CSS in Jade template

Currently, I am leveraging Express to construct a website. However, there seems to be an issue with my jade template not displaying the bootstrap grid system accurately. Despite double-checking that my app path is correctly set through app.use(express.stat ...