How to dynamically load bootstrap-multiselect within a loop in a vueJs application

I am attempting to dynamically load bootstrap-multiselect in a loop using VueJs.

My desired implementation looks something like this:

<div class="col-xs-6 col-sm-4 mb-1" v-for="params in param">

   <select class="mult" multiple="multiple">
       <option value="cheese">Cheese</option>
       <option value="tomatoes">Tomatoes</option>
   </select>

 </div>

Unfortunately, it is not loading correctly. Check out this jsfiddle for reference

If anyone has any advice on how to resolve this issue, please share. Thank you!

javascriptvue.jsbootstrap-multiselect

Answer №1

Check out this solution:

http://jsfiddle.net/Lw5us5y3/5/

In this code snippet, the refresh method of multiselect is being called after the updated Vue lifecycle.

$(function() {
    $('.mult').multiselect();
});

new Vue({
  el: '#app',
  data: {
    params: '',
    message: 'Test'
  },
  methods: {
    load: function() {
        this.params = [{value: 'cheese'},
        {value: 'tomatoes'}]
    }
  },
  updated: function(){
    $('.mult').multiselect('refresh');
  }
})

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

Using callback functions to handle parameters in GET requests

Hey there, I'm currently diving into the world of callback functions and I have a burning question that needs clarification. Adding event listeners seems easy enough: $0.addEventListener("click", function(event){console.log(event)}); When you click s ...

javascriptnode.jscallback

Can anyone point me in the direction of the source code for JSON.parse in Node.js, JavaScript, or V8?

When using JSON.parse(fileName_or_stringOfJSON), the string is converted into an object. I'm curious about how this conversion process works in NODEJs and where the source code can be found. ...

javascriptnode.js

Reload the text content of a locally hosted webpage within an iframe at regular intervals

I have set up a simple webpage on my local machine to showcase the contents of some text files on a dedicated monitor. However, I am facing an issue where refreshing the entire webpage causes flickering. My goal is to only refresh the iframes and reload t ...

javascripthtmliframerefresh

What is the best way to expand an object without including any null values?

Imagine a scenario where there is an object: var user = { "Name": "Dan", "Age": 27, "Hobbies": null }; and it needs to be merged with the following base object to ensure all necessary properties are present: var base = { "Name": nul ...

javascriptjquery

Enabling hover effects to scroll divs only when interacted with

I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...

javascriptcssreactjs

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Vue project encountering issue with displayed image being bound

I am facing an issue with a component that is supposed to display an image: <template> <div> <img :src="image" /> </div> </template> <script> export default { name: 'MyComponent', ...

javascriptvue.js

Differentiating between the simple and luxurious text editing features available in the TinyMce editor

I am currently utilizing the TinyMCE editor to enhance the appearance of a textarea field where users can input comments. My goal is to offer two options for users: one for plain text and the other for a rich text editing experience. When a user selects th ...

javascripthtmltinymceplaintextrich-text-editor

How to empty an array once all its elements have been displayed

My query pertains specifically to Angular/Typescript. I have an array containing elements that I am displaying on an HTML page, but the code is not finalized yet. Here is an excerpt: Typescript import { Component, Input, NgZone, OnInit } from '@angul ...

javascriptangulartypescript

Ways to retrieve the length of the parent array within a component in AngularJS

Is there a way to access the value of a property in the parent from within a component? Parent: export class Animal{ animalID ?: Array<number>; { Child: import {Component, Input} from '@angular/core'; import {Animal} from '../anim ...

javascriptangularjsangular

What is the best way to incorporate images from an external module into my React project?

Is there a way to include images from an external module (npm install external-module) in my project's public assets? The images are located in the directory path myProject/node_modules/external-module/dist/img. ...

javascriptreactjswebpack

React and the Use of External Libraries

Currently, I am developing a website with react and I am in need of installing mojs, mojs-timeline, and mojs-curve-editor. Unfortunately, these are not available as npm packages. Can anyone suggest the most effective method to integrate them into my react ...

javascriptreactjs

Creating tube-like geometry in intervals using three.js

Is there a way in Tube Geometry(Three.js) to plot and render only a portion of the tube at a time, with the option to continue plotting from that point after a set interval or timer? ...

javascriptthree.js

I'm getting an error in Vue Router that says "Cannot read property 'push' of undefined"

I am experiencing an issue with page redirection. Despite ensuring the accuracy of my definitions, I am consistently encountering errors. Can anyone shed light on why this error persists? Your assistance is greatly appreciated in advance; your support mea ...

vue.jsvuejs2vue-componentvue-router

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...

javascriptvue.jsvuejs3

The addScript feature seems to be experiencing difficulties upon the initial website load

Currently, I am utilizing the jquery.flexslider plugin and it is performing well. However, I have a specific requirement where I do not want to load the plugin for screens that are smaller than 600px. After experimenting with various scripts, I have final ...

javascriptjqueryhtml

I need assistance with a feature on my website where a new form is added every time the invite button is clicked, and the form is deleted when the delete button is

Invite.js This invite component includes an invite button outside the form and a delete button inside the form. The goal is to delete the form when the delete button is clicked. I have utilized useState and sourced this form from material-ui. Can anyone ...

javascriptarraysreactjsapimaterial-ui

When scrolling, the fixed menu bar at the top of the page is making the content below jump

I am attempting to create a fixed submenu that sticks to the top of the page when scrolling, but I am encountering some issues. The current code I have is as follows: $(window).scroll(function () { if ($(window).scrollTop() > 175) { $('#loca ...

javascriptjqueryhtmlcss

Capturing the dynamic server response with nested JSON structures

I am in the process of creating a dynamic data-binding function named assemble that requires two input parameters: server response (JSON) - nested JSON object. instruction set (JSON) - a configuration object that dictates the binding. The Issue: The cur ...

javascriptjsonmongodbdata-bindingnosql

Stop the continuous AJAX loop or look for an alternative method to retrieve and compare a list of HTML pages

I am in need of a solution to insert a small script onto all of my website pages. The script must include the correct token for each of the 21 different domains I have. However, not all the sites are directly under the 'domain name' but are consi ...

javascriptjqueryajax