I have that problem. I'm doing a system for the faculty and I decided to do it with Vue. My knowledge is not much in Vue, but I'm doing very well so far ... The code works perfectly for me, so I also use jQuery for some things I do not know about VueJS and for some plugins (I know it's not necessary, but for learning I decided to use both).
Anyway, I'm in a part of adding Courses, where there is a "Add new schedule" button (because you can add several teachers for different schedules on the same day) that add the next number of an accountant to a list with .push() and that list and iterated by v-for of Vue.
But once I have obtained all the data when I want to obtain the values of the new aggregate inputs, they do not come out. Exit undefined or HtmlCollections (0).
That's in methods > save (). I tried to get the data with jQuery but it does not work either: (
var vueModal = new Vue({
el: '#vue',
data: function () {
return {
count: 1,
limit: 1,
data: [1]
}
},
methods: {
add: function(){
if( this.limit > 4 ){
alert('No puedes agregar mas')
return;
}
this.count++,
this.limit++;
this.data.push( this.count );
},
remove: function(){
this.$delete( this.data, ( this.data.length - 1 ) );
this.limit--;
},
save: function(){
var elements = document.getElementsByClassName('course-teacher-box');
console.dir( elements )
$('.course-teacher-box').each(function(){
var val = $( this ).find('input').val();
console.dir( val );
})
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vue">
<div class="row" class="course-teacher-box" v-for="dataItem in data" :data="dataItem">
<hr />
<div class="col-md-6 mb-3">
<label for="course-cover">Profesor</label>
<select class="form-control" id="course-teacher" required="">
<option value="Juan">Juan</option>
<option value="José">José</option>
<option value="Maria">Maria</option>
</select>
</div>
<div class="col-md-6 mb-3 row">
<div class="col-md-6 mb-3">
<label for="course-title">Hora de inicio</label>
<input type="time" class="form-control" id="course-start" placeholder="Solo números, ejemplo: 5.4" value="" required="">
</div>
<div class="col-md-6 mb-3">
<label for="course-title">Hora de salida</label>
<input type="time" class="form-control" id="course-end" placeholder="Solo números, ejemplo: 5.4" value="" required="">
</div>
</div>
</div>
<div class="text-center mb-4 row" style="width:60%;margin:0 auto;">
<hr/>
<div class="col-md-6 mb-3">
<a href="#" @click="add()" class="btn btn-info" title="Agregar nuevo"><i class="fa fa-plus"></i> Agregar nuevo</a>
</div>
<div class="col-md-6 mb-3">
<a href="#" @click="remove()" class="btn btn-danger" title="Remover último"><i class="fa fa-times"></i> Remover último</a>
</div>
<div class="col-md-6 mb-3">
<a href="#" @click="save()" class="btn btn-danger" title="Remover último"><i class="fa fa-times"></i> Save</a>
</div>
</div>
</div>I also use bootstrap, but more than anything it's just CSS.
I would like that when I give it to Save() it shows me all the data of the inputs. Thanks