Updated select list with another - Vue.js

Question

So I'm attempting to handle two select lists, such that the sum of their computed values is equal to some max size. i.e., if the maximum number of people is 20, and 5 children are selected - a maximum of 15 adults can be added, and so on.

My last attempt:

template:

<div class="form-row">
 <div class="col">
   <div class="form-group">
     <label for="adultNumber">How many adults are in your party?</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">How many children are in your party?</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 tried a number of things, but not a lot seems to be work. As far as I can see, the Maths and array manipulation is correct ... just not the final desired output...

Help!

ippi · Accepted Answer · 2018-06-11 15:09:30Z

2

Your mistake is assuming the eventhandler called from onChange will get the model value passed in. It actually gets a HTMLElement change-event. So just don't use that and use the model directly - which is updated automatically.

updateChildPartySizes: function () {
    this.maxChildPartySize = this.maxChildPartyArray.length - this.adultNumber;

I found this by first trying:

console.log(this.maxChildPartySize); // NaN

And since NaN is infectious like the plague we know that one of the two variables added together must be bad, so I logged those and and found a the event.

Also keep in mind that models (v-model="something") are two-way bindings by definition, meaning it binds :selected="foo" (one way) and v-on:change="foo" under the hood.

edited Jun 11, 2018 at 15:09

answered Jun 11, 2018 at 14:57

ippi

10.2k3 gold badges41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GCien Over a year ago

I have just tried this with a slight tweak - and has worked. I don't know if I missed something because I had this at some point. Makes sense to update from this.adultNumber directly! Thank you so much.

Collectives™ on Stack Overflow

Updated select list with another - Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related