<div id="app3" class="ui segment">
<div v-for="(user, index) in users">
<div class="ui grid object_target">
<div class="two wide column field">
<input type="text" class="datepicker" />
</div>
</div>
</div>
</div>new Vue({
el: '#app3',
data: {
users: [{ name: '',procent:'' }],
},
methods: {
addUser(index) {
var vm = this
//dogovor model
//const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');
//dop file last
//const attrValue2 = this.$refs.div2.getAttribute('data-lastnum-attribute');
// console.log(attrValue2)
length=this.users.length
//length2=length+parseInt(attrValue2);
this.users.push({
name: '',
procent: length+1,
});
},
deleteUser: function (index) {
console.log(index);
console.log(this.finds);
this.users.splice(index, 1);
if(index===0)
this.addUser()
},
},
mounted: function () {
//const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');
//const attrValue2 = this.$refs.div2.getAttribute('data-lastnum-attribute');
//lastnum=parseInt(attrValue2);
//lastnum+=1
this.users[0].procent = 1;
}
});
<!--calendar-->
$( function() {
$( ".datepicker" ).datepicker();
} );
<input ref="datepicker" v-model="item.date">watch: {
items() {
this.$nextTick(() => {
this.$refs.datepicker
.filter(n => !n.classList.contains('hasDatepicker'))
.forEach(n => $(n).datepicker({
onSelect: () => n.dispatchEvent(new Event('input')),
}));
});
},
},<input v-datepicker v-model="item.date">Vue.directive('datepicker', {
inserted: el => $(el).datepicker({
onSelect: () => el.dispatchEvent(new Event('input')),
}),
});<v-datepicker v-model="item.date"></v-datepicker>Vue.component('v-datepicker', {
template: `<input :value="value" readonly="readonly">`,
props: [ 'value' ],
mounted() {
$(this.$el).datepicker({
onSelect: date => this.$emit('input', date),
});
},
});