Javascript 如何将multiselect组件中的默认值传递给另一个vue multiselect

我想传递vue multiselect component use props的默认值，但我不能这样做。 我使用两个选择器。当选择-1中的一个选项选择时，我希望选择-2中的默认值为选项选择

没有错误，只是工作不正常。从第一个选择中选择的值不属于第二个选择的默认值

多选组件

<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);
        }
    }
}

在模板中：

手稿：

数据：（）=>({
多选1:“，
多选2:“，
选项：[“列表”、“目录”、“选项”]，
占位符：“选择选项”
}),
方法：{
onChange（）{
this.multiSelect2=this.multiSelect1
}
}

---

请检查此代码沙盒：

请删除与问题无关的代码检查本文-确定编辑我的代码没有人会为您编辑原始代码。如果你想得到答案，你必须准确地准备问题。在“internalValue”中选择值1到选择值2，在占位符中选择否，这是错误吗？在项目的空白页面中重新创建提供的代码。我们有一个通用的vue multiselect组件，在其中调用值并在html页面上使用它们。这不起作用，因为这些值是从apiValues中获取的。这些值是在页面加载时从API获取的？然后在数据加载到fetch的

块后设置
This.multiSelect2=This.multiSelect1
。然后

块

**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>

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

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();
    },
});