Как при добавлении новой строки, к элементу крепить виджет datepicker?

Question

[Dauren S]

Vue.js методом adduser добавляет новую строку, так вот в новой строке у элемента .datepicker нет календаря. Как его добавлять?

<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();
  } );

Answer 1

[0xD34F]

Правильный вариант: отказаться от использования jquery, и взять какой-нибудь готовый компонент для vue. Можете заглянуть на awesome-vue, там есть список, может присмотрите себе что-нибудь.

Ну а так-то всё тривиально: вешаете ref на элементы, которые должны быть дейтпикерами; вешаете наблюдателя на массив с данными, в котором обходите элементы и инициализируете виджет там, где его нет:

<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),
    });
  },
});

Кстати, вам ещё в шаблоне надо будет добавить key в список пользователей.

Comments

[Dauren S]

c key не понял что то.

[0xD34F]

Dauren, не понял, что конкретно вы не поняли.

Как не понял, поняли ли вы остальное. Вопрос всё-таки не про key был - это так, предупреждение о том, что у вас есть источник потенциальных багов. Видимо, не стоило упоминать, раз вы, проигнорировав ответ, уцепились за этот момент. Надо будет запомнить на будущее.

[Dauren S]

0xD34F, И ещё в шаблоне надо будет добавить key в список пользователей.

[0xD34F]

Dauren, чё?

[Dauren S]

0xD34F, И ещё в шаблоне надо будет добавить key в список пользователей. Это в вашем ответе.Именно это предложение я и не понял. Где и что добавлять.

[0xD34F]

Dauren, не поняли - да и хрен с ним. Расслабьтесь. Не нужно вам это.

[Dauren S]

0xD34F, С чего это не нужно?Нужно.Вам самим нужно расслабиться.

[0xD34F]

Dauren, чё-то смеюсь. Если вы ни хрена не поняли, откуда вам знать, нужно или не нужно?

[Dauren S]

Нужно по заданию?вы не понимаете или что?Вам решать нужно мне это или нет?Не желания отвечать, тогда просьба уйти в сторону и не писать всякую чушь.

[0xD34F]

Dauren, и снова смеюсь. Как это нет желания отвечать? - я же вам ответил, предложил ТРИ варианта решения проблемы, с который вы сюда пришли. А вы их проигнорировали. Это у вас нет желания принимать ответы на собственные же вопросы. Шизофрения?

[Dauren S]

Я вам говорю по вашему ответу я все сделал, но не получается, видимо связано с тем что key не добавил. Но куда его добавлять я не понял. Все это время я пытаюсь это объяснить.

[0xD34F]

Да-а-а-а... Видать, дело у вас срочное, очень надо разобраться с проблемой - раз вы целых три дня скрывали своё "не получается". Кстати, "не получается" - это разговор ни о чём. Как и "все сделал" - тут таких немало было, которым казалось, что они "все сделали". КОД В ПЕСОЧНИЦУ. Давайте, показывайте, как вы накосячили.

UPD. В ответ добавлены ссылки на демо по каждому предложенному варианту.

[Ильдус Сираев]

Разряжу обстановку =)
Dauren, про key и для чего он нужен можете почитать здесь https://ru.vuejs.org/v2/guide/list.html
и здесь https://ru.vuejs.org/v2/api/#key

[0xD34F]

Ильдус Сираев, проблема не в key. Да ему и про key ничего знать на самом деле не интересно - хотел бы, сам за эти три дня открыл бы документацию и прочёл.

[Ильдус Сираев]

0xD34F, Да, я в курсе что key для этой задачи не причем), для общего развития скинул ссылки.
Тут на мой взгляд проблема в том, что вообще используется jquery