Issue with Vue multiselect not updating selections

I am currently dealing with a functioning example of vue-multiselect. Despite its functionality, there are two persistent issues that need addressing.

  1. One problem arises when attempting to remove an option by clicking the x button, instead of actually removing the option, it duplicates it.
  2. Another issue is that the loading spinner fails to disappear even after resetting the isLoading variable to false.

For a visual demonstration, refer to the example provided at: https://codepen.io/TheDevCoder/pen/bGVbGOG

Markup

<multiselect
    v-model="value"
    id="ajax"
    label="full_name"
    :options="store"
    :multiple="true"
    :loading="isLoading"
    :internal-search="false"
    @search-change="getData"
    >
</multiselect>

Script

getData(query){
    this.isLoading = true;
    if(query.length > 0){
        axios.get(`https://api.github.com/search/repositories?q=${escape(query)}`)
            .then((res) => {
                this.store = res.data.items;
                this.isLoading = false;
            })
            .catch((error) => {
                console.log(error);
                this.isLoading = false;
            });
    }
}

Answer №1

Solution for the initial problem you encountered

(Instead of deleting an option by clicking the x, it inadvertently creates a duplicate of the option)

Make sure to include :track-by="id" // or your specific unique key

Answer №2

It's evident that there are two separate issues within your code that need attention.

It seems that when attempting to remove an option by clicking the x, the option gets duplicated instead of being removed.

Working with objects in your multiselect requires defining an attribute that serves as a key for the multiselect to utilize. This key is crucial in pinpointing the element for removal from the selection. Refer to the official documentation for more details. In your scenario, utilizing the unique id as the key would be ideal. Therefore, set the track-by prop of the multiselect component accordingly.

<multiselect
  v-model="value"
  id="ajax"
  label="full_name"
  :options="store"
  :multiple="true"
  :loading="isLoading"
  :internal-search="false"
  @search-change="getData"
  track-by="id"

></multiselect>

The loading spinner persists even after resetting the isLoading variable to false.

The isLoading variable is only reset within the conditional if statement. What happens when the search query is empty? Therefore, consider moving the isLoading = true statement into the conditionally executed code block as well.

getData(query) {
  if (query.length > 0) {
    this.isLoading = true; // TODO: set the loader to true only if you're really searching
    this.queryData = JSON.parse(JSON.stringify(query));
    this.$http
      .get(`https://api.github.com/search/repositories?q=${escape(query)}`)
      .then(res => {
        this.store = res.data.items;
        this.isLoading = false;
      })
      .catch(error => {
        console.log(error);
        this.isLoading = false;
      });
  }
}

You can explore this corrected version of your code in the following fiddle: https://codepen.io/ug27/pen/abvoqjz

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

Steps for filling an HTML table within a dynamically loaded DIV

I have a container in my HTML page where I dynamically load other pages using the jQuery.load() function. One of the pages requires me to populate a table from the database just after/before it loads. How can I trigger a JavaScript function to execute righ ...

Column reverse flex-direction is functioning correctly, however, it is imperative that it does not automatically scroll to the bottom

I have a Flexbox set up where I need the contents to display in reverse order. Everything is working well, but the list has many items and the newest ones are appearing at the top. Currently, the Flexbox automatically scrolls to the bottom, but I want it t ...

Error encountered: jquery form validation fails to register changes

I am currently developing a calculator-like code where users will submit a form multiple times, and I need to save the result of calculations only if there are changes in the form. For instance, when a user clicks the "Calculate" button for the first time, ...

Guide to setting the value of an object using v-model with a list item

Update: I have identified that the issue lies with the v-model on the initial div, as it is not supported by Vue. Despite this, I am still unsure how to resolve the issue. My objective is to create a file list where each file includes a material selection ...

The location layer on my Google Maps is not appearing

For a school project, I am working on developing a mobile-first website prototype that includes Google Maps integration. I have successfully added a ground overlay using this image, but I am facing issues with enabling the "my location layer". When I tried ...

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Seeking a solution or Javascript library to create a scientific modeling application, similar to flowchart software such as Visio. The ability to add elements and connect them by clicking and dragging is essential. https://i.stack.imgur.com/vSZpB.png The ...

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

By utilizing Express, Node, and Angular, I incorporated an HTML button on my website that triggers a get request to Express. This request then executes a function that logs a predefined message to the console. Initially, when I click the button for the fir ...

The Art of Capturing Sound: Unleashing

Currently, I am attempting to capture video via html5 .getUserMedia and play it back without needing to upload it to a server. Despite following numerous tutorials, I have only been successful on Chrome by utilizing canvas to draw the webp image and then c ...

The Node.js Express undefined callback function is causing issues

I'm currently working on a personal project and I don't have much experience with nodeJS. My goal is to retrieve remote JSON data, generate statistics based on that data, and display it. However, I am encountering some issues with the callback fu ...

Gather data on webview requests and their corresponding responses

In my app, I am developing a feature that allows users to browse the web using a webview element. <webview src='user-generated'></webview> I am trying to find a way to capture all requests and responses generated during this process ...

Only allowing designated email addresses to authenticate using Gmail Oauth

Is there a way I can limit logins by doing the following? I'm facing an issue where the page keeps reloading constantly after logging in once. function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('Name: ...

Error message "Undefined error encountered when attempting to display an array of objects using jQuery and PHP through AJAX on the console"

While trying to parse a JSON using jQuery and AJAX, I encountered an issue where some objects in the Array, like the SUM(amountbet) object, are showing up as "undefined" in the console. https://i.sstatic.net/pMUqc.png The image above depicts th ...

Vue Quasar Drawer Layout with Bottom Bar

Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using: <template> <q-layout view="hHh lpR fFf"> <q-header elevated> <q-toolbar> <q-btn flat de ...

Accessing objects within an array of arrays of objects in react – a guide

First, I executed the following function: const getData = async (array,s,number) => { const response = await axios.get(s); const theData = response.data array[number]=theData } Then, I did this: let array=[] ...

Using `querySelector` in TypeScript with Vue 3

Encountered a TypeScript error while using the Vue Composition API let myElement = document.querySelectorAll('my-element') The TS error I'm getting when trying to access it like this: Property '_props' does not exist on type ...

Angular JS allows you to easily remove the # symbol from a URL, improving the

I am encountering a problem with the "#" symbol in my angular js website's URL. I need to remove the # from the URL but the method provided isn't working and the site is not displaying properly. Can someone advise me on how to successfully remove ...

Is there a performance benefit to using node.js over client-side JavaScript in comparison to Chrome/V8?

Currently, I am working on a client-side javascript application for image manipulation. However, some of the operations are running quite slowly in the browser, taking about 2-3 seconds to complete. To address this issue, I am considering implementing a s ...

Managing nested levels in Vue Draggable

Here is a link to the code sandbox: Nested Draggable Code Sandbox The nesting in this code is controlled through directives, specifically using v-if: <template> <draggable class="dragArea" tag="ul" :list="tasks" :g ...

Looking to confirm client-side text in NodeJS?

As I work on constructing a to-do list, one challenge I am encountering is confirming that the correct task has been checked off. While considering using unique IDs for each individual task may seem like a solution, there is still the risk of users manipul ...

Prevent the Icon in Material UI from simultaneously changing

I'm working on a table where clicking one icon changes all icons in the list to a different icon. However, I want to prevent them from changing simultaneously. Any suggestions on how to tackle this issue? Code: import React from 'react'; im ...