Vuejs dropdown selections are not working as expected due to a bug

My dropdown menu is being populated with options based on an API response that looks like the following:

{"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{"value":"1371","label":"mango "},{"value":"1365","label":"airconditioner"},{"value":"1365","label":"refridgerator"},{"value":"1365","label":"mobile"}

I'm experiencing a glitch where, due to some options having the same value but different labels, selecting one option automatically selects another with the same value. Is there any way in Vue.js to resolve this issue?

<select v-model="selected" class="selected-lists" size="8">
 <option v-for="facility in availableList" v-bind:value="facility.value">{{facility.label }}</option>
 </select>

Answer №1

When multiple items in your list have the same value, the first item will be chosen.

To address this, you can assign the entire object as the value: :value="facility"

If you only need the value of the selected item, access it through the selected property, which represents your model. In your template: {{ selected.value }}, and in your script: this.selected.value

Answer №2

There are three items in the list that have the value 1371.

The first item with this value will always be selected.

Make sure that all values are unique.

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

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

Chromium is having issues with updating the dynamic source attribute

One portion of my script that pertains to the question is as follows: <script type="text/javascript> function handleImageClick() { var image = $("#image_id"); $(image).attr("src", "ajax-loader.gif"); $.ajax({ ...

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

Retrieve information from an HTML form

Currently, I have a piece of Javascript that fetches the HTML for a form from the server using an XMLHttpRequest and then displays the form on the page. I am looking for a solution to extract the data that would be sent via POST if the form were submitted ...

The error message "TypeError: dom.getElementsByTagName is not a function in Node.js" indicates

I have just started learning HTML and web development. I am trying to extract a list of tags from an HTML document but I keep receiving the error message TypeError: dom.getElementsByTagName is not a function. I am making a GET request using axios, then u ...

The premature reveal of the back side in the Kendo UI flip effect on Internet Explorer

Currently, I am in the process of creating a BI dashboard for a business application using JavaScript Kendo UI version v2014.1.416. Unfortunately, I have encountered an issue with certain visuals while testing on IE11. I must mention that due to practical ...

I found myself pondering over possible solutions to rectify this parse error

I need help resolving an issue with parsing. Here is the link to the error image: https://i.stack.imgur.com/jKQat.jpg. Additionally, my HTML code connecting to the CSS site can be found here: https://i.stack.imgur.com/ST31r.jpg. The website I linked in t ...

Display error messages upon submitting the form

I am currently working on an Angular 6 Form with validation. My main goal is to display error messages only after the form has been submitted. It is crucial that these messages remain constant while the user types in the input field. For instance, if a use ...

Populate HTML Table with Array Elements

I need assistance with inserting array values into an HTML table. The table should have 5 columns and enough rows to accommodate all the information. I envision it looking like this: 1 | 2 | 3 | 4 | 5 11 | 22 | 33 | 44 | 55 111 | 222 | 333 | 444 | 555 ...

Command to conceal components for users visiting as guests

I'm looking to develop a directive that hides specific elements for guest users. Here is the current code I have: angular.module('someMod') .directive('premiumUser', premiumUser) .controller('PremiumUserCtrl', Pr ...

Testing dynamic components with Vue.js: A unit testing guide

In my component, I have a fieldgroup that consists of a label, input, and error elements. The input element is imported dynamically based on the prop (settings.input.component) received from the parent component. I wanted to test this component to ensure ...

How can I load a .json file into JavaScript without inserting it directly into the code?

Currently, I am dealing with a lengthy JSON snippet that resembles the following: { "section: [ [stuff] ] } To incorporate this into my JavaScript code, I currently use the following approach: var obj = { // {All the stuff from above} } My ...

How can I pass a variable name as an argument in Vue?

I am exploring ways to create a method that can efficiently load and assign JSON files to dynamic variables. Despite my efforts, varA and varB are not being populated as expected: data() { return { varA: Array, varB: Array } }, ...

Using the tensorflow library with vite

Greetings and apologies for any inconvenience caused by my relatively trivial inquiries. I am currently navigating the introductory stages of delving into front-end development. Presently, I have initiated a hello-world vite app, which came to life throug ...

What are the steps to adjusting page margins for Kindle devices?

While converting an HTML page for Kindle, I encountered a problem with multiple CSS files. The Kindle Guide recommends setting the left and right margins to 0 for normal body text in order to prevent content from falling off the edge of the screen or overl ...

Disabling the button add-ons functionality in Bootstrap 3 for mobile devices

I am facing a challenge with my website that has a visually appealing jumbotron and an enticing email signup call to action bar. The issue arises from the fact that my site is bilingual, catering to both German and English speakers, causing confusion with ...

Ensure that only the admin is able to make something vanish for everyone else

Is there a way to hide content for everyone except the admin? Currently, I have this code implemented but it only works when a user is not logged in. When another user logs in, the content is still visible. <?php if( isset($_SESSION['username&a ...

Challenge with PHP mail function in sending emails

I run a website and have a "Contact" section where users can fill out a form to reach me. The form is a basic one with its action being a php page. Here is the php code: $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4 ...

Ordering BufferGeometries in Three.js for Accurate Rendering

After consulting the discussion on the previous inquiry, I have been working on constructing models in BufferGeometry and have come to understand that the transparent flag plays a role in the rendering order: objects with transparent materials will be rend ...

Can local caching in ALL MAJOR browsers (Safari/Firefox/Opera/Chrome/IE) be achieved by an HTML5 web app that bypasses browser permissions?

Exploring the capabilities of the HTML5 offline application cache, I conducted boundary tests to observe how different browsers handle edge cases. Particularly, I focused on understanding the cache quota. To investigate further, I created and served an of ...