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并且不显示取消按钮。但它不起作用。看到图片。

The result screenshot

Answer 1

事实证明，刀片引擎在编译时遇到了一些问题。我将此文件与其他视图一起放在一个文件夹中。我发现其他视图有错误。只有这样，这个文件似乎工作正常。那就是我如何解决它。此文件无需更改代码。谢谢大家的时间。

Vue.js指令不起作用

1 个答案: