how to pass default value in multiselect component to another vue-multiselect

Question

I want to pass the default value of vue multiselect component use props, but I can't do this. I use two selectors. When one option in select-1 selects I want the default value in select-2 is option select

No error just doesn't work properly. The value selected from the first selection does not fall into the default value of the second selection

multiselect component

<template>
    <div>

        <multiselect v-model="internalValue" id="currency_id" @input="onchange" placeholder="Select Your Currency" label="title" track-by="title" :options="options" :option-height="10" :show-labels="false">
            <template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span>
            </template>
            <template slot="option" slot-scope="props"><img class="option__image" :src="props.option.img">
                <div class="option__desc"><span class="option__title" :id="props.option.id">{{ 
    props.option.title }}</span><span class="option__small">{{ props.option.desc }}</span></div>
            </template>
        </multiselect>

    </div>
</template>

import Vue from 'vue';
import Multiselect from 'vue-multiselect'
Vue.component('multiselect', Multiselect);

export default {
    props: ['options', 'value'],
    components: {
        Multiselect
    },
    data() {
        return {
            internalValue: this.value,

        }
    },
    methods: {
        onchange(options) {
            this.$emit('selectvalue', options.id);
        }
    },
    watch: {
        internalValue(v) {
            this.$emit('input', v);
        }
    }
}

HTML

**select 1**
    <multiselect @selectvalue="apiCalc":options="[
 {
     id: '1', title: 'Tether', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png'
 }

 ,
 {
     id: '2', title: 'ether', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png'
 }

 ,
 {
     id: '3', title: 'bitcoin', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png'
 }

 ]"
 > </multiselect>

select2

<multiselect id="receive-currency" :options="receive_currency" v- model="selectedValue"></multiselect>

app.js

new Vue({
        el: "#calculate",

        data: {
            receive_currency: [],
            selectedValue: null,
        },

        methods: {

            apiCalc(options) {
                let self = this;
                this.sendCurrencyId = options;

                var receiveCurrency = [];

                for (let item in responseData.data.direction.data) {
                    receiveCurrency.push({
                        title: responseData.data.direction.data[item].receiveCurrency.data.title,
                        img: '',

                    });

                }

                self.receive_currency = receiveCurrency;

                self.selectedValue = receiveCurrency[0]
            })
    }
}

},
components: {
        'multiselect': Multiselect
    },

    created() {
        this.apiCalc();
    },
});

Please delete code which is not relevant to the problem Check this article - stackoverflow.com/help/minimal-reproducible-example — Justice47
– Justice47, Commented Nov 19, 2019 at 8:23
No one will edit original code for you. If you want to get answer you must prepare question accurately. — Justice47
– Justice47, Commented Nov 19, 2019 at 8:35

Justice47 · Accepted Answer · 2019-11-19 08:54:33Z

0

In template:

<multiselect v-model="multiSelect1" :options="options" @input="onChange"></multiselect>
<multiselect v-model="multiSelect2" :options="options" :placeholder="placeholder"></multiselect>

In script:

data: () => ({
    multiSelect1: "",
    multiSelect2: "",
    options: ["list", "of", "options"],
    placeholder: "Select option"
}),
methods: {
    onChange() {
      this.multiSelect2 = this.multiSelect1
    }
}

Please check this codesandbox: https://codesandbox.io/s/vue-template-t226h

edited Nov 19, 2019 at 8:54

answered Nov 19, 2019 at 8:32

Justice47

7137 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dani Over a year ago

value selected 1 into select2 in " internalValue" , no in placeholder

Justice47 Over a year ago

That is the error? Re-create provided code in the empty page of your project.

dani Over a year ago

We have a general vue-multiselect component where we call the values and use them on html page. This does not work because the values are taken from api

Justice47 Over a year ago

Values are getting from the API at the page load?

Justice47 Over a year ago

Then set this.multiSelect2 = this.multiSelect1 after the data is loaded in the .then block of the fetch promise

Collectives™ on Stack Overflow

how to pass default value in multiselect component to another vue-multiselect

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related