javascript - Vue.js 指令不起作用

Question

我正在尝试使用 vue.js 进行动态表单输入。这是我的 HTML 代码。

<div id="multi">
  <form action="{{route('flighttickets.searchMulti')}}" method="post" class="container-fluid">
    {{csrf_field()}}
    <div class="row" v-for="(item, index) in items">
        <div class="form-group col col-sm-3">
          <select v-bind:name="inputName(index, 'from')" v-model="item.from" class="form-control" required>
            <option disabled selected value=''>From</option>
            @foreach($locations as $location)
              <option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
            @endforeach()
          </select>
        </div>
        <div class="form-group col col-sm-3">
          <select v-bind:name="inputName(index, 'to')" v-model="item.to" class="form-control" required>
            <option disabled selected value=''>To</option>
            @foreach($locations as $location)
              <option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
            @endforeach()
          </select>
        </div>
        <div class="form-group col col-sm-3">
          <input type="date" class="form-control" v-model="item.date" v-bind:name="inputName(index, 'date')" required>
        </div>
        <div class="col-auto" v-if="index >= min">
          <button type="button" @click="removeItem(index)" class="close pull-left" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    </div>
    <div class="row form-group" v-if="items.length <= max">
      <div class="col col-sm-3 offset-sm-6">
        <button type="button" @click="addItem()" class="btn btn-primary pull-right"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="row form-group">
      <div class="col col-sm-3 offset-sm-6">
        <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Search</button>
      </div>
    </div>
  </form>
</div>

脚本

var multi = new Vue({
      el: '#multi',
      data: {
        min: 2,
        max: 7,
        item:{from:'', to:'', date:''},
        items:[ { from: '', to: '', date: '' }, {from: '', to: '', date: ''} ]
      },
      methods: {
        removeItem: function(id) {
          if(this.items.length >= this.min){
            this.items.splice(id, 1);
          }
        },
        addItem: function() {
          if(this.items.length <= this.max) {
            var clone = JSON.parse(JSON.stringify(this.item));
            this.items.push(clone);
          }
        },
        inputName: function(index, property) {
          return "items["+index+"]["+property+"]";
        }
      }
    });

vue.js 不会相应地进行循环。根据脚本，表单输入应至少显示 2，小于或等于 2 时不显示取消按钮。但它不起作用。看图片。

Answer 1

事实证明 Blade 引擎在编译时出现了一些问题。我把这个文件和其他 View 放在一个文件夹中。我发现另一个 View 有错误。只有这样，这个文件似乎才能正常工作。我就是这样修好的。此文件无需更改代码。谢谢大家的宝贵时间。