如何将默认值传递给 vue-multiselect 使用道具

Question

我想将默认值传递给 vue 多选组件使用道具，但我不能这样做。

im use two selector, when select option in select 1 want default value in select 2 is opton select 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);
        }
    }
 }

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: {
        currentstep: 1,
        send_currency:'',
        receive_currency:[],
        event:'',
        sendCurrencyId:'',
        recive_val:[],
        sendRange:'',
        callApi:'',
        callSendApi:'',
        callReceiveApi:'',
        callSendAmount:'',
        selectedValue: null,
        steps: [
            {
                id: 1,
                title: "step1"
            },
            {
                id: 2,
                title: "step-2"
            },
            {
                id: 3,
                title: "factor"
            }
        ]
    },

    methods: {
        stepChanged(step) {
            this.currentstep = step;
        },


        apiCalc(options){
            let self = this;
            this.sendCurrencyId = options;
            var callSendApiText = "&send_currency=";
            var callReceiveApi= "&receive_currency=";
            var callSendAmount= "&send_amount=";
            this.callApi = '/ajax-calculation?includes=direction,direction.receiveCurrency';

            if(this.sendCurrencyId){
                this.callSendApi = this.callApi + callSendApiText + this.sendCurrencyId;
            }

            if (this.sendCurrencyId && this.callApi) {
                axios.get(this.callSendApi).then(function (response) {
                    var responseData = response.data;
                    console.log('response Api', responseData);
                    var sendRangeText = responseData.data.direction.data[0].info_templates.send;
                    // console.log("info",sendRangeText);
                    self.sendRange = sendRangeText;

                    var receiveCurrency=[];

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

                        });

                    }

                    console.log(receiveCurrency)

                    self.receive_currency = receiveCurrency;
                    self.selectedValue=receiveCurrency[0]


                    console.log("self.rec : " ,  self.receive_currency);



                })
            }



        }

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

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

显示此错误：app.js:39314 [Vue 警告]：属性或方法“值”未在实例上定义，但在渲染期间被引用。 通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

Answer 1

当您使用:value （不是value ）时，您说分配的值是 JavaScript 表达式，而不是 static 字符串。 因此，看起来您没有在使用multiselect的父组件的data中定义value ，而 Vue 将“值”视为变量。

如果您想在第一个多选的值更改时更改另一个多选的值，您可以在您的selectvalue事件处理程序中设置该值。 这是父组件的一个工作示例。 我使用value1为第一个多选设置默认值，使用value2为第二个多选设置默认值。 在第一个多选的selectvalue事件处理程序中，我将value2分配给在第一个多选中选择的选项：

<template>
  <div id="app">
    <multiselect
      @selectvalue="calculate"
      :value="value1"
      :options="[
        { id: '1',title: 'Tether', img: 'https://coinnik.com/uploads/...png' },
        { id: '2',title: 'ether', img: 'https://coinnik.com/uploads/...png' },
        { id: '3',title: 'bitcoin', img: 'https://coinnik.com/uploads/...png' }]"
    ></multiselect>

    <multiselect
      :value="value2"
      :options="[
        { id: '1',title: 'Tether', img: 'https://coinnik.com/uploads/...png' },
        { id: '2',title: 'ether', img: 'https://coinnik.com/uploads/...png' },
        { id: '3',title: 'bitcoin', img: 'https://coinnik.com/uploads/...png' }]"
    ></multiselect>
  </div>
</template>

<script>
import Multiselect from "./Multiselect.vue";

export default {
  name: "app",
  components: {
    Multiselect
  },
  data: () => ({
    value1: {
      id: "1",
      title: "Tether",
      img: "https://coinnik.com/uploads/...png"
    },
    value2: {
      id: "1",
      title: "Tether",
      img: "https://coinnik.com/uploads/...png"
    }
  }),
  methods: {
    calculate(option) {
      this.value2 = option;
    }
  }
};
</script>

要使其工作，您还需要在onchange方法中发送options （不是options.id ）：

methods: {
    onchange(options) {
      this.$emit("selectvalue", options);
    }
  }

您的代码中还有另一个问题：您在内部 Vue-multiselect 中使用v-model="value" 。 这会导致您自己的多选的value属性发生变异，因为v-model创建了双向绑定。 为避免这种情况，请使用:value而不是v-model

...
<multiselect
  :value="value"
  id="currency_id"
  @input="onchange"
  placeholder="Select Your Currency"
  label="title"
  track-by="title"
  :options="options"
  :option-height="10"
  :show-labels="false"
>
...