Combining two fields in v-select's item-text using Vuetify

Currently, in my Vue project using vue2.6 and Vuetify 2.3, I have a v-select menu that displays a list of module names. However, I want to modify the way the items are displayed by combining two fields together with a hyphen.

At the moment, the item-text property is set to display only the module name retrieved from the database.

<v-select
   :items="deplist"
   item-text="moduleName"
   item-value="moduleId"
   v-model="selection"
></v-select>

I am looking to change the item-text property to concatenate two fields (moduleName,moduleNum) with a hyphen between them. How can this be achieved within the item-text property?

item-text="moduleName" + "-" + "moduleNum"
e.g. "Mathematics-108"
javascriptvue.jsvuejs2vuetify.js

Answer №1

One easy method is to utilize a compact function that combines the values together...

<v-select
  :items="items"
  :item-text="item=>`${item.moduleName} - ${item.moduleNum}`"
  item-value="moduleId"
  v-model="selection"
>

See Demo

Answer №2

Make sure to input a new value directly into the specified location.

<v-select
   :items="deplist"
   item-value="moduleId"
   v-model="selection"
>
 <template v-slot:selection="{ item, index }">
  {{ `${item.moduleName} - ${item.moduleNum}` }}
 </template>

</v-select>

When utilizing this slot selection, the selected value will display the specific HTML content within the slot.

Answer №3

Try writing it this way and see if it works: Feel free to ask, if you encounter any issues.

item-text="moduleName+'-'+moduleNum"

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

Pause and wait for the completion of the Ajax call within the function before assigning the object to an external variable

In my quest to leverage JavaScript asynchronously to its full potential, I am looking for a way to efficiently handle received data from API calls. My goal is to dynamically assign the data to multiple variables such as DataModel01, DataModel02, DataModel0 ...

javascriptjsonajaxasynchronousendpoints

Unable to retrieve content in NGX-Quill upon submission

I am currently using "ngx-quill": "^14.3.0" along with "@angular/core": "~12.2.0". It is registered in the app module: QuillModule (not for root). And also in the lazy loaded module: QuillModule (not for root). public editor = { toolbar: [ ...

javascriptangularquillngx-quill

Understanding the "this" keyword in React.js is crucial for

Looking for a solution: updateSongIndex: function(index) { this.setState({currentSongIndex: index }); } I want to trigger the updateSongIndex function by clicking on a div element and passing an index as an argument var trackList = d ...

javascriptreactjs

MAMP experiencing internal server error when calling PHP function using jQuery ajax

My apologies if this question seems repetitive or redundant, but I have been searching through numerous queries regarding calling a PHP function via ajax, yet I am unable to make it work. I am working with MAMP and below is a snippet of my code: index.htm ...

javascriptphpjqueryajaxmamp

The process of incorporating content from a different page into a Bootstrap 5 Modal can be achieved by using Laravel 10

Here is a snippet of my code from index.blade.php: <a data-bs-toggle="modal" data-bs-target="#modal_frame" href="{{route('caborCreate')}}">link</a> This is how the modal is coded in the create page - cre ...

javascriptlaravelbootstrap-5laravel-10

Prevent a specific folder from being included in expressjs routing

When using my expressjs app, I load public assets like this: app.use(express.static(__dirname + '/public')); Afterwards, I redirect all requests to the index, where every path is handled by Backbone app.get('*', routes.index); I am ...

javascriptnode.jsbackbone.jsexpress

Encountering infinite loop in Node modules triggering a Catch-22 situation while attempting to use M

I have been working on a project that involves using some customized Node.js modules. I have developed a 'helpers' module that helps with loading various helper methods: /helpers/index.js: var mutability = require('./mutability'), ...

javascriptnode.jsmocha.js

Nextjs: If you encounter a file type that requires special handling, make sure you have the necessary loader configured to process it. Otherwise, the file will

I encountered the following error while attempting to run my Next.js application: ./node_modules/canvas/build/Release/canvas.node Module parse failed: Unexpected character '' (1:2) You may need an appropriate loader to handle this file type, curr ...

javascriptreactjsnext.jsartificial-intelligenceopenai-api

How come my total isn't zero after I get a 1 on the dice roll?

I've been working on a dice game where if either of the dice rolls a 1, the score is set to 1. However, I'm having trouble getting that part of my code to work properly. I'm confident that everything else is functioning correctly. v ...

javascriptprobabilitydice

The Tauri JS API dialog and notification components are failing to function, resulting in a null return value

Currently, I am getting acquainted with the tauri framework by working on a small desktop application. While testing various tauri JS API modules, most of them have been functioning as expected except for the dialog and notification modules. Whenever I tes ...

javascripttypescriptvue.jstauri

Adjust the package.json file for deployment

I've encountered a problem while attempting to deploy my nodejs application on Heroku. Despite following the documentation and modifying files in the root directory, I have not been successful. Below is the structure of my package.json file: { ...

javascriptnode.jsheroku

What is the best way to shrink or enlarge individual sections of the accordion?

Exploring AngularJs Accordions I'm struggling to understand how to control accordions in AngularJS. I have a step-by-step module set up as an accordion and I want to collapse one part while expanding another based on completion. Here is the accordion ...

javascriptangularjsaccordion

Unable to connect to server using React-Native fetch. Localhost is not being used

I recently encountered an issue with my app where the fetch function used for user authentication stopped working. Despite not making any changes, the transition from React 0.27 to 0.28 seemed to have caused this problem. After scouring through numerous S ...

javascriptiosreactjsreact-nativefetch-api

Managing memory usage in Vue 2 when dealing with a high volume of data (approximately 50,000 objects)

I am in the process of creating a table view for large collections of moderately complex objects using Vue 2. The concept involves fetching anywhere from 50,000 to 100,000 rows from a database and storing them in a JavaScript cache. These rows are then dyn ...

arraysperformancememoryvue.jsvuejs2

The touchend event and target _blank are not working together harmoniously

With both image and link hover states in place, I've implemented a piece of code to ensure that opening a link on iOS only requires a single tap. Check out the code below. However, I've encountered an issue where using a link with target="_blank ...

javascriptjqueryhtmlios

invoking a function each time the slider is interacted with

I have a slider implemented in my code. When the slider is clicked, it should trigger a function called myFunction() which displays an alert message saying "clicked". Below is the code I have written, but it is not functioning as expected. <html> & ...

javascriptjquery

JavaScript Indexed Array Names: Managing Arrays with Indices

I have a collection of arrays named "list0" through "list7" which have been explicitly defined. My goal is to include each of these arrays as elements in an existing array, creating a 2D array of these defined arrays. How can I reference each 'list&a ...

javascriptarraysnames

Using React JS to extract query string values

My current URL contains the following: http://example.com/callback?code=abcd I am trying to extract the value of "code." Here is the React code I have written: import React from 'react'; import { useEffect } from 'react'; const Callba ...

javascriptreactjsreact-hooksquery-string

Should I include one of the dependencies' dependencies in my project, or should I directly install it into the root level of the project?

TL;DR Summary (Using Lodash as an example, my application needs to import JavaScript from an NPM package that relies on Lodash. To prevent bundling duplicate versions of the same function, I'm considering not installing Lodash in my application' ...

javascriptnode.jsnpm

Unexpected behavior occurs when using scrollTop to determine the new height after refreshing a div inside a Bootstrap modal

I have included a Bootstrap-based modal that enables users to add and view posts: <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="prodCommentModalLabel" aria-hidden="true"> <div class="modal-dialog modal-l ...

javascriptjqueryajaxtwitter-bootstrap