Binding Data in Vue Multiselect

Question

Binding Data in Vue Multiselect

After extensive searching, I stumbled upon an amazing searchable select Vue component that has caught my eye: https://github.com/monterail/vue-multiselect.

However, there seems to be a small issue when it comes to feeding it an array of objects as options. The data binds to the entire object instead of just the value.

Interestingly enough, I came across an issue in the repository that was created 8 hours before my own quest began:

https://github.com/monterail/vue-multiselect/issues/263

I sense that I might be overlooking something obvious. Any assistance on this matter would be highly appreciated.

javascript binding autocomplete vue.js multi-select

Answer 1

Answer №1

Utilize filter options and incorporate a custom label.

let categories = [
  {id: 1, name: "adam"},
  {id: 2, name: "michael"}
];

<multiselect 
  v-model="rule.id" 
  :options="categories.map(category => category.id)" 
  :custom-label="opt => categories.find(x => x.id == opt).name">
</multiselect>

To learn more, refer to the related discussion on this github thread.

Answer 2

Utilize filter options and incorporate a custom label.

let categories = [
  {id: 1, name: "adam"},
  {id: 2, name: "michael"}
];

<multiselect 
  v-model="rule.id" 
  :options="categories.map(category => category.id)" 
  :custom-label="opt => categories.find(x => x.id == opt).name">
</multiselect>

To learn more, refer to the related discussion on this github thread.

Answer 3

Answer №2

As per the information in the documentation for vue-multiselect, it is stated that:

The array of available options can be Objects, Strings, or Integers.
If an array of objects is used, the visible label will default to option.label.
If the labal prop is provided, the label will be equal to option['label'].
@type {Array} */ options: { type: Array, required: true },

Therefore, it is expected to bind to the entire object from the provided list, and the option can be assigned to the object's label property like this:

[... { label: "option1", otherdata.. }, { label: "option2", otherdata.. }, ]...

Answer 4

As per the information in the documentation for vue-multiselect, it is stated that:

The array of available options can be Objects, Strings, or Integers.
If an array of objects is used, the visible label will default to option.label.
If the labal prop is provided, the label will be equal to option['label'].
@type {Array} */ options: { type: Array, required: true },

Therefore, it is expected to bind to the entire object from the provided list, and the option can be assigned to the object's label property like this:

[... { label: "option1", otherdata.. }, { label: "option2", otherdata.. }, ]...

Answer 5

Answer №3

I have developed a solution where an object receives the selected item from a vue-multiselect. It then sends this object using '@input' to trigger the function "listaCidades", which will only send the "id" to my API. Here is the code snippet for reference:

<multiselect                          
  v-model="selectedState"
  :options="stateList"
  :multiple="false"      
  label="description"
  track-by="description"
  :preselect-first="false"
  @input="cityList(selectedState.id)"
></multiselect>

cityList(stateId){
  //sending the selected id to the API
  this.$http
    .get(this.$apiURL + "/cities/list/" + stateId, {
      headers: {
        authorization: "Bearer " + this.user.token
      }
    })
    .then(response => {
      if (response.data.status) {            
        this.cityList = response.data.cityList;            
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

Answer 6

I have developed a solution where an object receives the selected item from a vue-multiselect. It then sends this object using '@input' to trigger the function "listaCidades", which will only send the "id" to my API. Here is the code snippet for reference:

<multiselect                          
  v-model="selectedState"
  :options="stateList"
  :multiple="false"      
  label="description"
  track-by="description"
  :preselect-first="false"
  @input="cityList(selectedState.id)"
></multiselect>

cityList(stateId){
  //sending the selected id to the API
  this.$http
    .get(this.$apiURL + "/cities/list/" + stateId, {
      headers: {
        authorization: "Bearer " + this.user.token
      }
    })
    .then(response => {
      if (response.data.status) {            
        this.cityList = response.data.cityList;            
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

Answer 7

Answer №4

After updating to the latest version of vue-multiselect, I was able to successfully implement this code:

<multiselect
  v-model="store_front_id"
  track-by="id"
  label="name"
  :options="storefronts.map(i => i.id)"
  :searchable="false"
>
  <template slot="singleLabel" slot-scope="props">
    <span class="option__title">{{ getStoreFrontName(props) }}</span>
  </template>
  <template slot="option" slot-scope="props">
    <span class="option__small">{{ getStoreFrontName(props) }}</span>
  </template>
</multiselect>

computed: {
    ...mapState('storefront', ['storefronts']),
},
methods: {
    getStoreFrontName(props) {
        return this.storefronts.find(i => i.id === props.option).name
    },
}

Answer 8

After updating to the latest version of vue-multiselect, I was able to successfully implement this code:

<multiselect
  v-model="store_front_id"
  track-by="id"
  label="name"
  :options="storefronts.map(i => i.id)"
  :searchable="false"
>
  <template slot="singleLabel" slot-scope="props">
    <span class="option__title">{{ getStoreFrontName(props) }}</span>
  </template>
  <template slot="option" slot-scope="props">
    <span class="option__small">{{ getStoreFrontName(props) }}</span>
  </template>
</multiselect>

computed: {
    ...mapState('storefront', ['storefronts']),
},
methods: {
    getStoreFrontName(props) {
        return this.storefronts.find(i => i.id === props.option).name
    },
}

Binding Data in Vue Multiselect

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What's the best way to ensure you're linting the correct file type for importing in Web

Sending data from PHP to JavaScript using AJAX

How can I transfer an array of objects obtained from an ajax call to an observable array?

Guide on replacing the "read more" text with a Vuetify icon in a Vue.js application

Navigate through a nested JSON structure and update the data points

What could be the reason for my Node.js Express response coming back as empty?

Getting started with TinyMCE in Nuxt: A step-by-step guide

Nuxtjs component fails to hot reload when v-if condition is modified

Quasar version 2 (Vue) introduces an exciting new feature in the QTable component - the ability to

Animating a camera along a predefined path in A-Frame to maintain focus on a subject

Error detected (unresolved promise): Invalid JSON format is causing an Unexpected token < at the beginning of data position (Application built with React/Redux)

Ways to determine if the backbone.js model has been emptied

Substitute regular expressions with several occurrences by their respective capture groups

developing a shader that transitions between day and night based on the movement of a light source

Is it possible to prompt npm to install a sub-dependency from a GitHub pull request?

Tips for loading images dynamically (or lazily) as they come into the user's view with scrolling

What makes Angular date pickers sluggish?

What is the procedure for obtaining a Connect server's host name and port number?

Press the div using JavaScript and jQuery

Exploring the attributes of ExtJS display objects