The VueJS Chosen directive fails to refresh when new options are selected

Question

The VueJS Chosen directive fails to refresh when new options are selected

Struggling to populate my jQuery Chosen dropdown field with AJAX data using VueJS. Unfortunately, when trying to update the values, the Chosen dropdown does not reflect the changes.

I've experimented with different approaches, including manually triggering

$('.cs-select').trigger("chosen:updated");

upon receiving the AJAX response. However, it seems that this method is ineffective due to VueJS requiring a few moments to parse the results for all dropdowns (I have around 20 dropdowns with identical values on a single page).

For example, adding the city Amsterdam does not appear in the JavaScript-enabled dropdown even after everything has loaded: http://jsfiddle.net/qfy6s9Lj/106/

Is there a simple solution to this issue? I believe resorting to setTimeout() is not the ideal approach.

javascript ajax vue.js jquery-chosen

Answer 1

Answer №1

Here is a potential solution that might require some effort on your part. Upgrading to Vue 1.0 would grant you access to a params value, allowing you to set up a watcher for when items are added to your cities array reference (https://vuejs.org/guide/custom-directive.html#params). However, in version 1.0, you must use v-for to list out the options since manual writing of option elements is necessary https://vuejs.org/guide/forms.html#Select

The reason it may not be functioning as expected could be due to lack of a listener for changes when the options change within your custom directive. The update function only detects modifications to the variable provided to v-chosen.

Depending on your requirements and timeline, upgrading directly to 2.0 could be an option. Although still in beta, 2.0 is close to official release. In 2.0, you would develop a custom component to manage plugins like so (https://github.com/vuejs/vue/blob/next/examples/select2/index.html) which was previously a directive in 1.0 and now a component in 2.0.

Answer 2

Here is a potential solution that might require some effort on your part. Upgrading to Vue 1.0 would grant you access to a params value, allowing you to set up a watcher for when items are added to your cities array reference (https://vuejs.org/guide/custom-directive.html#params). However, in version 1.0, you must use v-for to list out the options since manual writing of option elements is necessary https://vuejs.org/guide/forms.html#Select

The reason it may not be functioning as expected could be due to lack of a listener for changes when the options change within your custom directive. The update function only detects modifications to the variable provided to v-chosen.

Depending on your requirements and timeline, upgrading directly to 2.0 could be an option. Although still in beta, 2.0 is close to official release. In 2.0, you would develop a custom component to manage plugins like so (https://github.com/vuejs/vue/blob/next/examples/select2/index.html) which was previously a directive in 1.0 and now a component in 2.0.

The VueJS Chosen directive fails to refresh when new options are selected

Answer №1

Similar questions

Guide for inserting personalized buttons onto a map with the Bing Maps 6.3 Ajax Control

Is it possible to access a component's function from outside an ng-repeat in Angular 1.5?

How can the Header of a get-request for an npm module be modified?

Events related to key press timing in HTML 5 canvas

Performance issues may arise in React styled-components when the state changes frequently during mousemove events

Transmitting Several Pictures at Once Through WhatsApp-WebJS

Ways to address memory leakage issues in Angular

What can you do with a 2D array and getElementsByTagName?

InternJS - Unresolved TypeError: The undefined object does not have a property named 'readFile'

Transferring AJAX response from Django to a PHP variable

Utilize Angular to inject an input from a component directly into the header of my application

Having trouble with collision detection in Three.js?

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

swapping out a submit link for an indicating Ajax button

Error: The combination of 0 and .... is invalid and cannot be used as a function

Restricting the number of mat-chips in Angular and preventing the input from being disabled

How can I animate SVG paths to fade in and out sequentially?

Are there any situations in which subscribing to an RXJS Observable does not result in either a success or error response

A guide to integrating OIDC through the vuex-oidc library within a Vue.js application

Attempting to retrieve nested data, only to be met with an undefined response