Vuetify Dropdown Widget not Displaying Identifier in place of Text Value

I have created a form using <v-combobox> for autocompletion, which is working correctly. However, I am encountering an issue where the form submits the ID from the options array instead of the selected value. Despite setting the item-value="key" to match the item-text="key", the submitted value is incorrect.

<v-flex
  v-for="key in inputsNames"
  v-if="key !== 'id'"
  :key="key"
  xs12
>
  <v-combobox
    v-model="editForm[key]"
    :item-text="key"
    :label="key"
    :loading="loading"
    :search-input.sync="inputSearch[key]"
    :items="searchOptions"
    :item-value="key"
    cache-items
    clearable
    prepend-icon="filter_list"
  />
</v-flex>

For example: When filling the x, y fields with autocomplete and manually inputting others, it results in an error message:

**Array to string conversion (SQL: insert into table (w, x, y, z) values (test, 5, 4, 1)) **

In this scenario, 5, 4, should be two separate strings.

UPDATE:

The issue persists, but I have discovered that the entire item object is being sent to the POST method.

Answer №1

Update 2022: After revisiting this issue, I have finally discovered the solution. It turns out that the culprit is the return-object property, which is set to true by default. Disabling it resolves the unexpected behavior of the v-combobox.

<v-combobox
    :item-text="(obj) => (obj)[key]"
    :item-value="(obj) => (obj)[key]"
    v-model="editForm[key]"
    :search-input.sync="editForm[key]"
    :items="searchOptions"
    :return-object="false"
>

Original Resolution: For individuals facing a similarly intricate scenario with the combobox in the future, I have managed to crack this puzzle. Strangely, the standard :item-value attribute does not function properly in a multi-combobox setup like the one I have implemented here. The workaround is to create a custom mapping for the key in the :items attribute as shown below:

<v-flex
    v-for="key in columns"
    v-if="key !== 'id'"
    :key="key"
    xs12
>
    <v-combobox
        :item-text="key"
        v-model="editForm[key]"
        :search-input.sync="inputSearch[key]"
        :items="searchOptions.map((obj) => (obj)[key])"
    />
</v-flex>

This approach enables you to create multiple comboboxes and utilize the same logic to handle all of them independently as intended.

Answer №2

Vue 3.0 brings a minor adjustment: changing from item-text to item-title

<v-combobox
  :items="[{ key: 'alice', value: '1' }, { key: 'Bob', value: '2' }]"
  item-title="key"
  item-value="value"
  label="Dropdown"
/>

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

How can I put a row at full-width in a Material-UI table in React

I need assistance with displaying data in a table using JSX code: const StudentsTable = (props) => { const classes = useStyles(); return ( <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple ...

Run a section of code located in a different file

I have defined some global functions in main.js like this: Vue.prototype._isMobile = function () { return $(window).width() < 768 } //Few more similar functions Now, I want to move these functions to a separate file called util.js: return (function ...

Assign increasing values within an array

Is there a way to efficiently update multiple values in an array by mapping through them? I want to select and change all of them simultaneously. state.formData.forEach(item => { item.EndDate = nextDayIfSelected; }); ...

Incorrect port being used for fetching URL in redux.js

I have developed a MERN application that utilizes both async/await with Axios and Redux to handle the data flow within the application. Redux is primarily used for login and authorization, as shown in this tutorial. While some shared tables are fetched thr ...

The returned data from a Apollo Client useMutation call is consistently undefined

Currently, I have a code snippet that executes a mutation to update a post to "published." The mutation functions correctly and updates the data as intended. However, I am facing an issue where the data property remains undefined in the useMutation hook. S ...

Updating a list of books from a form in another component: Step-by-step guide

Hello everyone, I am fairly new to using React and am currently following a tutorial on creating a book library. In this project, I have an AddNewBook Component which is essentially a form structured as follows: function AddNewBook(){ const [name, setNam ...

Is it possible for me to showcase information using a method, but not by utilizing a computed property? What could be the

I am trying to make my array prop "Hotels" reactive by moving the method into a computed property. However, after making this change, my data no longer displays. The array contains nested arrays of hotels with various values like the number of rooms. To di ...

Prevent parent window from being accessed when child popup window is active

I am facing a challenge with my aspx page that opens in a child window. I want to restrict access to the parent window until the child window is closed. Is there a way to achieve this? Currently, I am using jQuery for handling the popup functionality. In ...

Are there any notable purposes for using the `.d.ts` file extension beyond just improving code readability?

Within my project, I have a file named shims-vue.d.ts located in the src folder: declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } I ...

Execute a function after another function completes in JQuery

After a page finishes refreshing, a jQuery event is triggered: $(#id).trigger('reloaded'); The 'reloaded' event is custom; How can I set up a listener to run another function when it's done 'reloading'? I had this ide ...

Issue with React functional component's useState implementation

Whenever I update the state within a function, it doesn't seem to work correctly. I am setting my state to the opposite value, but it's not changing on the second console log. However, the third console log shows true. Why is it not returning tr ...

AngularJS ng-table with collapsible headers using jQuery accordion

Currently, I am utilizing AngularJS ng-table to showcase specific information. My goal is to have a fixed header with a scroll bar for the ng-table. Additionally, I aim to include an accordion just before the ng-table. However, when I collapse the accordi ...

Encountering a 404 error in Spring v2.3.2 while trying to send a post request using AJAX axios on a Tom

My spring application is working fine on my local machine and deploys successfully on both Tomcat 8 and 9. However, when trying to post data with AJAX using Axios, I keep receiving a 404 error message. I have double-checked the URL on both the front-end an ...

How can I ensure that an item stays in place within a vertically sortable list using Dndkit? (I am also considering alternative drag-and-drop libraries)

Let's say for instance that 5 was marked as frozen. If 4 was then moved below 6, the change in arrangement would be as follows: before: https://i.sstatic.net/iVZFtAmj.png after: https://i.sstatic.net/tCq09Qgy.png My current approach involves us ...

How to make a sticky sidebar using JavaScript or jQuery

Hello everyone! I am just starting out in front end web development, so please bear with me if my question seems basic. I am trying to figure out how to create a sticky sidebar that only appears when the parent div is in view, and disappears when it' ...

Parent scope receives directive updates with a slight delay

I recently made a transition of my simple paging feature from the controller to a directive, but encountered a peculiar issue. Whenever I update the parent scope from within the directive, the changes only reflect on the next alteration. For instance, if t ...

Error encountered while trying to install discordjs with npm

npm encountered an error with code 1 while trying to install windows-build-tools: Error occurred in command: C:\WINDOWS\system32\cmd.exe /d /s /c node ./dist/index.js Python MSI and BuildTools_Full.exe were successfully downloaded but the ...

Issue: [AppRoutes] is not recognized as a valid <Route> component

Currently diving into React-Router with guidance from this helpful tutorial: https://blog.logrocket.com/complete-guide-authentication-with-react-router-v6/ Here's a snippet from my App.jsx: import { Route, createBrowserRouter, createRoutesFromE ...

Step-by-step guide on setting up a weekly recurrence using a datepicker

Can anyone help me figure out how to create an event repetition feature using a datepicker and a <v-text-field>? Essentially, I want users to be able to choose the number of weeks that the event will repeat for. For example: If I select Monday, Octo ...

Quasar - Optimize for varied platforms

Currently, I am endeavoring to set up a project with various environments including staging, production, testing, and development. When using Vuejs, this task is quite straightforward. vue-cli-service build --mode staging Additionally, I need to create a ...