Question

我想通过vue multiselect组件使用props的默认值，但是我不能这样做。我使用两个选择器。当select-1中的一个选项选择我希望select-2中的默认值是选项select

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

多选组件

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

Answer 1

在模板中：

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

在脚本中：

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

请选中此代码和框：https://codesandbox.io/s/vue-template-t226h

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

1 个答案: