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

事實證明，刀片引擎在編譯時存在一些問題。 我將此文件與其他視圖一起放在一個文件夾中。 我發現另一個視圖有錯誤。 只有這樣，該文件才能正常工作。 這就是我修復它的方式。 無需對該文件進行任何代碼更改。 謝謝大家的寶貴時間。