Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
vuejs select element binding
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment