Vue, how to pass multiple values to v-model in vue-select

I’m using the vue-select plugin and I’m trying to figure out how I can pass multiple values to the v-select .

I’m trying to change language based on what I select:

<v-select v-bind:placeholder="$t('Select')"  v-model="title"  :options="languages" :reduce="title => title.language" label="title" @input="changeLocale"></v-select>

import i18n from '../plugins/i18n.js';
import {en, es} from 'vuejs-datepicker/dist/locale'
 export default {
   data() {    
    return {        
      languages: [            
        { language: 'en', title: 'English', lang: en },  
        { language: 'es', title: 'Español', lang: es }      
        methods: {    
            changeLocale(language) { 
                i18n.locale = language; 
                i18n.lang = lang //trying to figure out how to pass this as well


import Vue from 'vue'
import VueI18n from 'vue-i18n'

const messages= {
  "en": {
import {en, es} from 'vuejs-datepicker/dist/locale'
export const i18n = new VueI18n({
  locale: 'en', // set locale
  lang: en,
  fallbackLocale: 'en',

export default i18n;

but I need languages.language for i18n.locale and languages.lang for i18n.lang , so far I figured out how to pass one by using reduce , :reduce="title => title.lang" but I’m wondering how I can reduce for title.lang and title.language and pass them both in to the changeLocale method?

Thanks so much!

Don’t use the custom reduce at all. IIRC then it returns the entire language object and you can take the props you need.

@Puukallistaja thanks so much! So I should just return the whole languages array and call languages.lang and languages.locale?

Almost, but not exactly. You pass in to vue-select a list (array) of options. When you select one of them, input event returns the one you selected. So then you can access those like this:

changeLocale(language) { 
  i18n.locale = language.language; 
  i18n.lang = language.lang
1 Like