Utilizing v-model in Vue multiselect to dynamically generate an object within a list

Incorporating PrimeVue and Multiselect, I am attempting to dynamically generate a list of objects. By using a simple v-model binding to a variable, a list of selected options is created.

<MultiSelect v-model="selected_signals" optionLabel="name" optionValue="name" :options="simu_signals" />

If we consider selecting 3 signals, the output would be:

selected_signals = ['signal1', 'signal2', 'signal3']

My objective is to create an object with the default configuration of each selected signal every time an option is chosen. For the same 3 signals as before, the desired output should be:

selected_signals = [{
    name: 'signal1',
    interpolation: true,
    unit: '',
    type: 'origin'
},
{
    name: 'signal2',
    interpolation: true,
    unit: '',
    type: 'origin'
},
{
    name: 'signal3',
    interpolation: true,
    unit: '',
    type: 'origin'
},
]

I have been struggling with this task, attempting to listen for the @change event and then construct the necessary structure. However, I faced difficulties because Multiselect is not bound to any values, making it challenging to manipulate the selected options.

Answer №1

Although there is an @input event for vue-multiselect, it is not necessary for this particular use case.

Take a look at the example below where I have eliminated the need for the optionValue

var application = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      selectedSignals: [],
      options: [{
       name: 'signal1',
       interpolation: true,
       unit: '',
       type: 'origin'
      },
      {
       name: 'signal2',
       interpolation: true,
       unit: '',
       type: 'origin'
      },
      {
       name: 'signal3',
       interpolation: true,
       unit: '',
       type: 'origin'
      },
     ],
    }
  },
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b7b4a4ecacb4adb5a8b2a4ada4a2b581f3eff0eff1">[email protected]</a>"></script>
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d5d6c68eced6cfd7cad0c6cfc6c0d7e3918d928d93">[email protected]</a>/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
<div>
  <multiselect
    v-model="selectedSignals"
    track-by="name"
    placeholder="Select signal"
    label="name"
    :options="options"
    :multiple="true"
    :close-on-select="false"
  >
  </multiselect>
</div>
<pre class="language-json"><code>{{ JSON.stringify(selectedSignals) }}</code></pre>
</div>

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

The padding on the button inside the v-card is not being applied as expected

I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

Difficulty encountered when trying to template routes with more than one slash in Angular-route

I'm encountering difficulties with my Express+Jade+AngularJS[v1.2.22] application when attempting to access routes such as "mydomain.com/something/somethingelse" or "mydomain.com/something/another/last", which include one or more path subdivisions. T ...

How can successful AJAX requests access PHP data?

Do you know how I can run a basic PHP code using AJAX and receive the data back from the PHP page in the AJAX success function? I am facing an issue where I am not getting anything in the AJAX success callback from the PHP page, and it's really bothe ...

Hiding Modal Box Upon User Login: A Step-by-Step Guide

After a user clicks the login button in my navigation, a modal box pops up. However, once the user logs in, the modal box does not disappear. How can I hide or remove the modal box when users click on the login button? This code snippet is from Home.vue: ...

Encountering unexpected behavior when using V-flex inside a V-Card

I've been working on creating a V-Card in vuetify with a specific layout. The challenge I'm facing is that the top part of the card will vary in size, so I need to align the bottom part of the card to always be at the bottom. After attempting so ...

Tips for removing ASP.NET MVC controller name from angular route

My ASP.NET MVC login page leads to a different page that is integrated with Angular. After logging in, the URL looks something like this: http://localhost:5083/Home#/home I want to remove the ASP MVC controller name ("Home") from the URL. Is there a ...

What is the best way to link the data from the HTML input to the class property in the TypeScript file? (Combining Angular and IntroJs)

I'm working on an onboarding screen with Intro.js and need help with receiving user input. I've been trying different methods like [(ngModel)] = checked, [(checked)] = checked, (checked) = checked, but haven't had any success. Can anyone pro ...

The feature to "Highlight text on the page" in React-pdf is currently malfunctioning

I am currently working on incorporating the pdf highlighting feature from React-pdf: import React, { useMemo, useState } from 'react'; // import { Document, Page } from 'react-pdf'; import { Document, Page } from 'react-pdf/dist ...

When utilizing document.addEventListener in JavaScript, Firefox fails to report exceptions triggered by DOMContentLoaded

I'm developing an internal framework that must be independent of any external dependencies such as jQuery. I'm working on implementing a custom DOM ready-style functionality, where callbacks in the ready queue should continue executing even if an ...

Creating a Hidden Button on Your PWA: A Step-by-Step Guide

After creating a React app with Create React App, I decided to use the default PWA configuration. However, I am facing some confusion regarding how to hide the "Add to Home Screen" button. Can anyone provide some guidance on this issue? Thank you. https: ...

Vue.js Issue: Unable to update Data Store variables using Axios for a GET request?

My current project involves using Vue.js and working with components. Within my Data Store, I have a variable called "comments" that I need to update within the "created" section of the script, so that I can later update my HTML element using a v-for loop ...

Divide JSON arrays into separate select boxes

I have integrated AngularJS into certain sections of my website, rather than using it for the entire site. Currently, I am dealing with a scenario where I have a pair of select boxes, one dependent on the other. One box contains a list of countries, while ...

Establishing a connection between the socket and the currently authenticated user through socket.io

My website consists of multiple pages, and when a user logs in, I need to establish a connection between their user ID (stored in MongoDB) and the socket for real-time messaging. Currently, user details are saved in the express session variables upon login ...

My Vue component seems to be missing in my Vue.js project

Here is the code for my header.vue component: <template> <div> <h2>this is header h2</h2> </div> </template> <script> export default { name: 'Header', data () { return { dat ...

Which is better: express.Router() or app.get() for serving routes

I am currently working with Express 4 server for Node.js Express comes with a built-in router, which is utilized as follows: in app.js var router = express.Router(); app.use(router); app.use('/users', usersRoutes); in userRo ...

What is the process for verifying a particular user in AngularJS?

I'm new to AngularJS and I'm a bit confused about the concepts of GET, PUT requests. I am currently working on an app where I display a list of users on one page, and on another page, I have a form with three buttons. My main focus is on the "Con ...

Selecting a default option in Angular when the value is present and repeated

My goal is to pass a parameter in the URL to a page where a select element is populated dynamically. The parameter that needs to be passed is customerProfile.id. I want to find this id in the select options and have it selected by default. How can I achiev ...

The synergy of THREEJS and GC in creating dynamic and interactive

In an effort to optimize my threejs scene, I noticed that the CPU usage was high even when the scene was not in use. After exploring various solutions, I tried removing the memory of mesh using the dispose() method to prevent memory leaks. labelMesh[i].ge ...

Mongoose documents are set to automatically be deleted after a duration of one month

My goal is to retain a particular document for one month after the client-user deletes it. To achieve this, I have decided to simulate a delete action and display data in the browser. Sample schema: const product = new mongoose.Schema({ --- trash : { ty ...

Discover the position within a two-dimensional array

Suppose I have an array that contains objects, and each object has its own id property. In this case, I can find the index by writing: data.findIndex(x=>x.id === newData.id); Now, if data is an array of arrays of objects, how can I efficiently get two ...