vuejs select element binding

vuejs-select-binding-2.vue

<template>
    <div id="checkout">
        <div class="row mt-3">
            <slot></slot>
            <div class="col-12 form-group">
                <label class="text-small text-uppercase required" for="payment_gateway">Payment Method</label>
                <select id="payment_gateway" name="payment_gateway" class="form-control"
                    v-on:change="chooseGateway($event)" v-model="selected">
                    <option v-for="_gateway in gateways"
                        v-bind:value="_gateway.value"
                        v-bind:selected="_gateway.selected"
                        v-bind:disabled="_gateway.disabled">
                        {{ _gateway.text }}
                    </option>
                </select>
            </div>
        </div>
        <p>{{ selected }}</p>
        <p>{{ gateway }}</p>
        <!-- <cod-checkout v-if="selected == 'COD'"></cod-checkout> -->
        <!-- <stripe-checkout v-if="selected == 'STRIPE'"></stripe-checkout> -->
        <!-- <paypal-checkout v-if="selected == 'PAYPAL'"></paypal-checkout> -->
    </div>
</template>

<script>
    // import CODCheckout from './CODCheckout.vue';
    // import StripeCheckout from './StripeCheckout.vue';
    // import PaypalCheckout from './PaypalCheckout.vue';

    export default {
        name: 'checkout',
        components: {
            // 'cod-checkout': CODCheckout,
            // 'stripe-checkout': StripeCheckout,
            // 'paypal-checkout': PaypalCheckout
        },
        data() {
            return {
                selected: '',
                gateway: {
                    value: '',
                    text: 'Choose payment gateway',
                    selected: true,
                    disabled: true
                },
                gateways: [
                    {
                        value: '',
                        text: 'Choose payment gateway',
                        selected: true,
                        disabled: true
                    },
                    {
                        value: 'COD',
                        text: 'Cash On Delivery'
                    },
                    {
                        value: 'STRIPE',
                        text: 'Stripe'
                    },
                    {
                        value: 'PAYPAL',
                        text: 'PayPal'
                    }
                ]
            }
        },
        methods: {
            chooseGateway: function(event) {
                var idx = event.target.options.selectedIndex;
                console.log(event.target.value + '-> ' + event.target.options[idx].text);

                var checkout = this;

                checkout.gateway = $.grep(checkout.gateways, function(gateway) {
                    return gateway.value == checkout.selected;
                }).pop();
            }
        }
    };
</script>

vuejs-select-binding.vue

<template>
    <div id="checkout">
        <div class="row mt-3">
            <slot></slot>
            <div class="col-12 form-group">
                <label class="text-small text-uppercase required" for="payment_gateway">Payment Method</label>
                <select id="payment_gateway" name="payment_gateway" class="form-control" v-model="gateway">
                    <option v-for="_gateway in gateways"
                        v-bind:value="_gateway"
                        v-bind:selected="_gateway.selected"
                        v-bind:disabled="_gateway.disabled">
                        {{ _gateway.text }}
                    </option>
                </select>
            </div>
        </div>
        <p>{{ gateway }}</p>
        <!-- <cod-checkout v-if="gateway.value == 'COD'"></cod-checkout> -->
        <!-- <stripe-checkout v-if="gateway.value == 'STRIPE'"></stripe-checkout> -->
        <!-- <paypal-checkout v-if="gateway.value == 'PAYPAL'"></paypal-checkout> -->
    </div>
</template>

<script>
    // import CODCheckout from './CODCheckout.vue';
    // import StripeCheckout from './StripeCheckout.vue';
    // import PaypalCheckout from './PaypalCheckout.vue';

    export default {
        name: 'checkout',
        components: {
            // 'cod-checkout': CODCheckout,
            // 'stripe-checkout': StripeCheckout,
            // 'paypal-checkout': PaypalCheckout
        },
        data() {
            return {
                gateway: {
                    value: '',
                    text: 'Choose payment gateway',
                    selected: true,
                    disabled: true
                },
                gateways: [
                    {
                        value: '',
                        text: 'Choose payment gateway',
                        selected: true,
                        disabled: true
                    },
                    {
                        value: 'COD',
                        text: 'Cash On Delivery'
                    },
                    {
                        value: 'STRIPE',
                        text: 'Stripe'
                    },
                    {
                        value: 'PAYPAL',
                        text: 'PayPal'
                    }
                ]
            }
        }
    };
</script>