I created a form where some inputs are automatically added to the form based on the value from a select input. Ex. select has value 3, inserts 3 inputs, then if select gets value 1 the two last inputs are removed and remains only one input. I built this process with vuejs.
This form is part of a multipage form, and its data is stored in a session, so the user can go back and forward and data he inserted must be filled in the proper places.
The data from those automatically created inputs is saved into a session array ( Session::put(“stop_airport”) ) and to get an individual value, i must call something like this Session::get(“stop_airport.0”).
So...
How do i pass the $index variable from the vuejs loop “v-for” to laravel session array variable Session::get(“stop_airport.0”), replacing the 0(zero) by $index?
Or there is another way of doing this?
View
<div class="form-group{{$errors->has('stop_airport[0]') ? ' has-error' : ''}}" v-for="stop in stops" v-if="main.stops > '0'">
<div class="col-md-6">
<label class="control-form">Aeroporto de Escala</label>
<input type="text" name="stop_airport[]" :placeholder="($index+1) +'ª Escala'" class="form-control airport-input" v-model="stop.airport" value="{{Session::get('stop_airport.0')}}">
@if ($errors->has('stop_airport[0]'))
<span class="help-block">
<strong>{{ $errors->first('stop_airport[0]') }}</strong>
</span>
@endif
</div>
</div>
Vuejs
new Vue({
el:'#flight-details',
data:{
main:{
stops:''
},
stops:[],
oldStops:''
},
methods: {
updateStops: function (event) {
// diffrence between current and old stops values
var dif = this.main.stops - this.oldStops;
// if negative
if(dif < 0){
dif *= -1;
var lgt = this.stops.length - 1;
var index = 0;
for(var i=0;i<dif;i++){
index = lgt - i;
this.stops.splice(index, 1);
}
// if positive
}else if(dif > 0){
for(var i=0;i<dif;i++){
this.stops.push({
airport:""
});
}
}
// save current stops value
this.oldStops = this.main.stops;
},
},
ready: function(){
this.updateStops();
}
});