Populate a Vuetify combobox with the data stored in an array of objects

I'm currently working on a complex piece of code that has me feeling lost. I am utilizing TypeScript with Vue (Vuetify), but I am still relatively new to TypeScript.

My challenge involves an array of objects that I need to load as items into a Vuetify combobox component.

Array =[
{ 
  subject: 'science', 
  difficulty: 'medium'
}
{  
  subject: 'math', 
  difficulty: 'hard'
}]

The goal is to display the subject in the dropdown list, while having the difficulty as the hidden value behind each combobox item.

I understand that it should look something like this:

items: [
{ text: 'science', value: 'medium' },
{ text: 'math', value: 'hard' }];

Then, I can utilize it within the V-Combobox component like so:

   <v-combobox :items="items" />

If anyone knows how to achieve this, your help would be greatly appreciated!

arraystypescriptobjectcomboboxvuetify.js

Answer №1

Your problem is not clear to me, but a common combobox setup should appear as follows:
(initialize selectedItem as an empty array in your data and refer to this.selectedItem.text)

<v-combobox
      v-model="selectedItem"
      :items="items"
      item-value="value"
      item-text="text"
      :return-object="true"
      label="Select an item.."
      outlined
      clearable
    >
    </v-combobox>

Answer №2

To load the contents of an array, you need to set the items props and also the item-value and item-text props as demonstrated by @Aurora. This is necessary because you are working with an array of objects, and the component needs to understand which fields will represent the value and the display.

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

Checking for JSON value presence within a JavaScript Array

Given the following array of JSON objects: var myArray = [ {name:'foo',number:2}, {name:'bar',number:9}, {etc.} ] Is there a way to determine if myArray includes an object with the name "foo"? ...

javascriptjqueryarraysjson

Loop through an array of JSON data using jQuery

While some may find this topic basic, I am struggling to iterate through a JSON object using jQuery and access the webpage name of each producer. Any assistance would be greatly appreciated. Below is my code for reference: { "producers": [ { ...

jqueryarraysjsonobject

Difficulty in presenting data retrieved from a getter function

New Question: I need assistance with calculating the win percentage for different teams based on the wins and losses entered by the user. In my program, when displaying the team information, the win percentage always shows up as "0.000000". How can I updat ...

javaarraysinheritancearraylistpolymorphism

Displaying the array of structures

Why is my printList() function only outputting the last element added to the array by addInfo()? Is there a mistake in how elements are being added to the array? #include <stdio.h> #include <stdlib.h> //structure Location typedef struct Loc ...

carraysstruct

I am experiencing issues with my Angular2 project where not all of my component variables are being passed to the

My problem involves sending three variables to my HTML template, but it only recognizes one of them. The HTML template I am using looks like this: <div class="page-data"> <form method="post" action="api/roles/edit/{{role?.ID}}" name="{{role? ...

typescriptangularangular2-template

Strange behavior detected in the Pipeline package of Quantopian / Zipline

During my exploration of the "Pipeline" API from Quantopian/Zipline, I stumbled upon a peculiar pattern. They have a class called CustomFactor, which includes a compute() method that needs to be overridden when creating your own Factor model. The compute( ...

pythonarraysparameter-passingpass-by-referencezipline

Understanding how to access and manipulate hash values stored in an array using Perl

I recently started learning Perl (just yesterday evening) and I'm facing an issue with an array of hashes. Here's the scenario: I have multiple poorly structured CSV files generated daily by a logging application. I aim to consolidate them and d ...

arraysperlcsvhash

What is the best way to integrate Angular 6 and Codeigniter 3 in a web project in order to have Angular handle the frontend and Codeigniter take care of the backend operations

I am interested in creating a web application that utilizes Angular 6 for the frontend and Codeigniter 3 for the backend. However, I am facing difficulty in integrating both technologies as most tutorials I found focused on using AngularJS which is an olde ...

phptypescriptcodeigniter-3angular6scaffolding

Unpacking data types from an array of classes in TypeScript: A step-by-step guide

I am working on a function that takes an array or rest of Typescript classes as input and resolves, returning their instances. However, I'm struggling to ensure correct typing for it. If I take one class as an example: class Base { isBase = true ...

typescript

Adding double quotes to arrays in D3.js after using the .map method

Here is the code snippet I am working with: d3.csv("static/data/river.csv", function(data) { var latlongs = data.map(function(d) { return [d.Lat,d.Lng]; }) var lineArray1 = latlongs; console.log(lineArray1); When I view the outpu ...

javascriptarraysd3.js

Leveraging array.prototype.map along with an average function

Despite thoroughly reading the documentation on the map method, I am still unable to make this code work. My objective is to use map to calculate the average of each pair of numbers in an array. Can someone please help me understand what's going wrong ...

javascriptarrays

When should I schedule the execution of the .spec and .po.ts files in Protractor?

Curious about TypeScript and Protractor: I have a couple of basic helper functions stored in a shared.po.ts file within my Protractor suite. These functions are triggered by the third it() in my .spec file - meaning they are not immediately called upon ru ...

angulartypescriptprotractor

When I pass an array of objects to Firefox (using TypeScript) and retrieve the data, I find that I am unable to retrieve it in the form of an array of objects

When it comes to saving and retrieving data from a Firebase database, I seem to be encountering an issue where the type of data retrieved does not match what I am expecting. Let me break down what I am doing and the problem I am facing: Saving data To sa ...

jsonangulartypescripthttpget

In Angular with rxjs, make sure the response is set to null if the json file cannot be found during an http.get request

When working on my Angular app, I often retrieve data from a static JSON file like this: @Injectable() export class ConfigService { constructor(private http: HttpClient) { } getData() { this.http.get('/assets/myfile.json').subscribe(da ...

angulartypescriptecmascript-6rxjs

NGRX refresh does not result in any successful actions

Having an issue with loading users into a mat-selection-list within a form. Everything works fine the first time, but upon page refresh, the selector returns 'undefined'. Initially, both GET_USERS and GET_USERS_SUCCESS are triggered (console log ...

angulartypescriptngrx

JavaScript: Add element to array if it doesn't already exist, or remove it if it does

How can we efficiently toggle an element in an array using TypeScript? By toggling, I mean: If the element is already present, remove it. If the element is not present, add it. We are looking for a solution that minimizes computational effort. ...

arraystypescript

When using Express, the node.js application is able to skip over conditional statements and proceed

In my express app, I have 2 if statements serving as middleware. The first one runs smoothly, but the second one seems to skip and executes the next() function without checking the second if statement. app.use((req: Request, res: Response, next: express. ...

javascriptnode.jstypescriptexpress

Can multiple parameters be passed in a routing URL within Angular 11?

app-routing.module.ts { path: 'projectmodel/:projectmodelname/salespack', component: componentname} When navigating using a button click, I want the URL to be structured in the following way: I attempted to achieve this by using the following co ...

angulartypescript

What causes a standard React component with a default render prop to not pass PropTypes validation successfully?

I'm currently working on a React component with a render-prop that has a generic type. To improve usability, I want to set a default value for the render-prop. The code is functioning correctly, but during type-checking, I encountered a warning regard ...

javascriptreactjstypescriptjsxreact-proptypes

How can I troubleshoot my outdated JavaScript tool that is duplicating elements in an array?

Below is the input that needs to be converted into JSON format as shown: {RS0004036}:{0;3}:{0000003AB;0000003BC}_{RS0004036}:{3;3}:{0000003DE;0000003FG}_{RS0004036}:{1;2}:{0000003HI;0000003JK} The code should parse the above input and generate a JSON stri ...

javascriptarraysjson