Question

所以我试图处理两个选择列表，使得它们的计算值之和等于某个最大值。即，如果最多人数为20，并且选择了5个孩子 - 最多可以添加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调用的eventhandler将获得传入的模型值。它实际上获得了一个HTMLElement更改事件。所以只是不要使用它并直接使用模型 - 它会自动更新。

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

我首先尝试了这个：

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

由于NaN具有传染性，就像瘟疫一样，我们知道加在一起的两个变量中的一个必须是坏的，所以我记录了这些并找到了一个事件。

另请注意，模型（v-model="something"）根据定义是双向绑定，这意味着它将:selected="foo"（单向）和v-on:change="foo"绑定在引擎盖下。

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

1 个答案: