在vue多选中更改值时如何调用api

Question

vue多选发生改变值事件时如何调用api？ 我想在多选中更改值，调用 api 并在控制台中显示。以下是我的代码。

<template>
    <div>

        <multiselect v-model="value" 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" alt="No Man’s Sky"><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" alt="No Man’s Sky">
                <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>

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

    export default {
        props: ['options'],
        components: {
            Multiselect
        },
        data () {
            return {
                value: { title: 'Bitcoin', img: 'https://coinnik.com/uploads/crypto- 
           logos/06fa2ab3d5a0f1d60e7d236aeccd6c6a.png' },

            }
        },
        methods: {

           }
        }
      </script>

app.js

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

            axios.get('/ajax-calculation?includes=direction,direction.receiveCurrency&send_currency=2').then((response) => {
                self.calcApi = response.data;
                console.log('api:',self.calcApi.currency_id);
                // self.calcApi.currency_id;


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

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

html

     <div class="col-md-12 mb-2">
<multiselect                                                                        :options="[                                                                                 { title: 'Tether', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png' },
{ title: 'value', img: 'https://coinnik.com/uploads/crypto-logos/006fe133d48ea7cd45cf8ccb8cb7ec42.png' }]">
</multiselect>
</div>

如何定义我在更改项目时使用的方法，然后调用 api 并在控制台中显示？

Answer 1

你可以对 value 变量使用 deep watch。

watch: {
  'value': {
    handler: function (after, before) {
      this.apiCalc();
    },
    deep: true
  },

},

Answer 2

好的，首先，您可以使用@input 事件来识别何时选择了某物，如下所示：

<multiselect v-model="value" :options="options" @input="doApi" multiple></multiselect>

然后在doApi中，可以查看当前值。

doApi() {
    console.log(this.value);
}

this.value 的值将是您选择的数组。您可以将这些传递给您的 API。完整的代码在这里：https://codepen.io/cfjedimaster/pen/gOOjjrb?editors=1111

Answer 3

您是否尝试过使用@select 事件？ Vue Multiselect 的文档包括几个你可以尝试的事件，在这里查看：https://vue-multiselect.js.org/#sub-events

那就试试吧

<multiselect v-model="value" :options="options" @select="actionToExecute" multiple></multiselect>

然后在你的方法中定义它。我目前也在使用 vue 多选，所以请告诉我这是否适合您。