Modify choices in real-time using Vue.js multi-select feature

Hello, I've come across a modified wrapper for handling a multiple select in vue js using this. My goal is to change the value of "Bubble car" inside the vue component. Below is my code snippet.

<select2-multiple :options="car_options" v-model="input.classification">
       <option disabled value="0">Select one</option>
</select2-multiple>

Here is the corresponding vue script,

var vm = new Vue({
    el: '#el',
    delimiters: ["[[", "]]"],
    data: {
        input: {
            classification: []
        },
    },
    created: function () {
        var vm = this;
        vm.car_options = [
            {id: "Bubble car", text: 'Bubble car'},
            {id: "diesel", text: 'Diesel'},
            {id: "electric", text: 'Electric'},
            {id: "electric_diesel", text: 'Electric/Diesel'},
            {id: "electric_gasoline", text: 'Electric/Gasoline'},
            {id: "ethanol", text: 'Ethanol'},
            {id: "gasoline", text: 'Gasoline'},
            {id: "hydrogene", text: 'Hydrogene'},
            {id: "lpg", text: 'Liquified petroleum gas (LPG)'},
            {id: "other", text: 'Other'},
        ];
        vm.input.classification = ["Bubble car"];
    }
});

I'm trying to have "Bubble car" automatically selected when the multi-select appears. Everything else seems to be functioning correctly and values are displaying properly. The potential issue may be in this line of code:

vm.input.classification = ["Bubble car"];

No errors are being shown, so any help with resolving this would be greatly appreciated.

Answer №1

Everything seems to be running smoothly from my end - Take a look at the JsFiddle here

We are assigning vm.car_options[0].id to the vm.input.classification array

Answer №2

To include the specific ID in the data{} object, you simply need to add it like this:

selected: ["Bubble car"]

For a complete solution, check out this link: JsFiddle

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

Issue with sharing on Facebook via direct URI

I'm currently working on implementing an FB share button on my website. When a user clicks on the button (which features the FB image), they are redirected to . I am dynamically setting the URL as location.href through JavaScript, and the URL is autom ...

Encountered a problem while trying to implement the jssor slider within an AngularJS application utilizing the

I encountered an issue when trying to use the jssor slider with the ui-view directive The slider functions correctly without AngularJS Uncaught TypeError: Cannot read property 'currentStyle' of undefined" index.html <!DOCTYPE html> &l ...

What causes certain webpack / Babel ES6 imports without a specified extension to resolve as "undefined"?

When I try to import certain ES6 files (such as .js, .jsx, .ts, .tsx) using the syntax import ComponentName from './folder/ComponentName'; (without extension), they end up resolving as undefined. This occurs even though there are no errors from W ...

What is the reason behind Vuetify considering 0 as not set in lazy validation rules?

When I retrieve default values from the API, the :rules tag interprets a value of 0 in the v-text-field as not set: image This is my code snippet: <v-col cols="12" sm="6" md="4"> <v-text-field type="number" :rules="incapacidadRules" min="0" ...

Exploring methods for handling svgs incorporated in angular.js templates with webpack

I'm currently working on cache-busting my SVGs and other files like translation JSON. The issue I'm facing is that webpack does not seem to recognize imported svgs in the following format: <md-icon md-svg-src="assets/icons/ic-edit.svg">&l ...

Why are all my requests being denied for the chat-app with nested collections in Firestore Rules?

I am encountering a challenge with configuring Firebase Rules for my chat app. I want to restrict users from accessing conversations they are not part of, but when I try to implement the rules, access gets denied even when checking for conversation existen ...

The Laravel validation feature, when used in conjunction with the 'sometimes' and 'present' rule, may not always successfully override other rules specified in the validation conditions

I am currently working on creating a method that can update a user profile with ease. I want the validation to only take effect if there is data in the field. However, when attempting to use the 'sometimes' property along with the 'present&a ...

Start the Vue component only after ensuring that the element has been fully loaded

I have created a small vue.js component in JavaScript. Is there an elegant way to instantiate the vue component only when the element is loaded? The problem I am facing is that I'm receiving warnings in other HTML files where the element does not ex ...

There seems to be a problem with the JavaScript on this page - it could be running slowly or may have become unresponsive

Recently, I incorporated several jQuery components into my website and all was running smoothly. However, out of the blue, an error message started popping up: "A script on this page may be busy, or it may have stopped responding. You can stop the script ...

Modify the -webkit-text-stroke- hue using JavaScript

I've been working on a website that features text with "text stroke", and I am attempting to dynamically change the color of this text stroke using JavaScript. My goal is to have four different color options available. However, as it is based on webk ...

In ReactJS, the process of rendering a functional component differs from that of a class component

I have a class component that looks like this: import { Component } from 'react'; import { DEFAULT_HPP, DEFAULT_PAGE, DEFAULT_QUERY, PARAM_HPP, PARAM_PAGE, PARAM_SEARCH, PATH_BASE, PATH_SEARCH, } from '../../constants'; ...

removing the mapStateToProps function will result in an undefined value

I am new to React and I'm in the process of converting a class component to functional components using hooks. I need some guidance on safely removing 'mapStateToProps' without encountering undefined errors. I have two pages, A.js and B.js. ...

Tips for integrating CSS modules with TypeScript and Rollup

I am currently working on developing a TypeScript library to be shared across various websites. It's been a while since I last worked on something like this. Here is a snippet from my tsconfig.json: { "compilerOptions": { "target& ...

What are some ways to dynamically find and import JavaScript files while the code is running?

Currently, I am developing a node.js-based server that manages various devices. The server informs connected clients about its capabilities by utilizing separate JS files that define objects with inheritance through util.inherits(). The issue I am facing ...

Unselect all checkboxes except for the one that was clicked

In a project, I have 3 checkboxes that are interconnected and when one is clicked or checked, I want the others to be cleared while keeping the clicked checkbox checked. This behavior is similar to radio buttons but I cannot use radio buttons due to client ...

The AJAX Request has indicated that the entity provided is not in an accurate 'application/json' format. It seems to be missing or empty, leading to an error with a code of '400'

While attempting to create an AJAX request to submit users to an external API, I faced a problem that is hindering my progress. Since I'm more familiar with PHP than JS, I saw this as an opportunity to expand my knowledge in JavaScript. The approach ...

How to use Axios in Vue JS to access an array within a JSON object

Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays. I suspect that my approach to accessing arrays within the JSON object is incorrect, ...

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

I need to be able to trigger a JavaScript function that is located outside of my Angular app when a button is clicked. Unfortunately, it seems that importing the JavaScript directly into my Angular app isn't feasible for this task. The platform I am ...

Is it possible to restrict optionality in Typescript interfaces based on a boolean value?

Currently, I am working on an interface where I need to implement the following structure: export interface Passenger { id: number, name: string, checkedIn: boolean, checkedInDate?: Date // <- Is it possible to make this f ...

Conceal the form after it has been submitted

I am working with the following JavaScript function: var form = $('#review-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status center"></div>'); $.aj ...