Trying to manage two select lists where their combined values equal a maximum size. For example, if the max number of people is 20 and 5 children are selected, only a maximum of 15 adults can be added, and so on.
My latest attempt:
Template:
<div class="form-row">
<div class="col">
<div class="form-group">
<label for="adultNumber">Number of adults in your group:</label>
<select class="form-control form-control-sm" v-model.lazy="adultNumber" v-on:change="updateChildPartySizes" id="adultNumberVal">
<option v-for="n in maxAdultPartyArray">[[ n ]]</option>
</select>
Answer: [[ adultNumber ]]
</div>
</div>
<div class="col">
<div class="form-group">
<label for="childNumber">Number of children in your group:</label>
<select class="form-control form-control-sm" v-model.lazy="childNumber" v-on:change="updateAdultPartySizes" id="childNumberVal">
<option v-for="n in maxChildPartyArray">[[ n ]]</option>
</select>
Answer: [[ childNumber ]]
</div>
</div>
</div>
Vue instance:
<script>
let app = new Vue({
el: '#app',
data: {
bookingDetails: true,
yourDetails: false,
sessionName: null,
specialRequests: '',
adultNumber: 0,
childNumber: 0,
maxAdultPartySize: 20,
maxChildPartySize: 20,
maxAdultPartyArray: Array.apply(null, {length: 20 + 1}).map(Number.call, Number),
maxChildPartyArray: Array.apply(null, {length: 20 + 1}).map(Number.call, Number),
sessionSize: {{ sessionSize }},
csrfToken : '{{ csrf_token }}',
},
delimiters: ['[[', ']]'],
methods: {
updateChildPartySizes: function (adultNumber) {
this.maxChildPartySize = this.maxChildPartyArray.length - adultNumber;
this.maxChildPartyArray = Array.apply(null, {length: this.maxChildPartySize}).map(Number.call, Number);
},
updateAdultPartySizes: function (childNumber) {
this.maxAdultPartySize = this.maxAdultPartyArray.length - childNumber;
this.maxAdultPartyArray = Array.apply(null, {length: this.maxAdultPartySize}).map(Number.call, Number);
},
}
});
</script>
I've attempted various methods, but nothing seems to provide the desired result. The math and array operations appear to be correct, but the final output is not as expected...
Can anyone offer assistance?