javascript - 使用另一个更新了选择列表 - Vue.js

Question

因此，我尝试处理两个选择列表，以使它们的计算值之和等于某个最大大小。即，如果最大人数为 20 人，并且选择了 5 名 child ，则最多可添加 15 名成人，依此类推。

我的最后一次尝试:

模板:

<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 实例:

<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>

我尝试了很多方法，但似乎没有很多方法有效。据我所知，数学和数组操作是正确的......只是不是最终想要的输出......

救命!

Answer 1

您的错误是假设从 onChange 调用的事件处理程序将获取传入的模型值。它实际上获取 HTMLElement 更改事件。所以不要使用它并直接使用模型 - 它会自动更新。

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

我第一次尝试发现了这个:

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

由于 NaN 像瘟疫一样具有传染性，我们知道加在一起的两个变量之一一定是坏的，所以我记录了这些变量并发现了一个事件。

另请记住，模型 (v-model="something") 根据定义是双向绑定(bind)，这意味着它绑定(bind) :selected="foo" (一种方式)和 v-on:change="foo" 在引擎盖下。