vue.js child control

Правильный вариант работы компонента с моделью. Например есть свойство объекта типа дата, необходимо сделать так чтобы компонент делил его на составные части (день, месяц, год) и при изменении которых изменялась бы сама модель :

Vue.component('my-date',{
      template: '\
      <table>\
       <tr>\
         <td>day:<input type="text" class="width50" v-model="day" v-on:input="updateValue($event.target.value)" /></td>\
         <td>month:<input type="text" class="width50" v-model="month" v-on:input="updateValue($event.target.value)" /></td>\
         <td>year:<input type="text" class="width50" v-model="year" v-on:input="updateValue($event.target.value)" /></td>\
       </tr>\
     </table>',
     props:["value"],
     data: function () {
          return {
            day:0,
            month:0,
            year:0
          }
        },
        mounted: function(){
            this.day = moment(this.value).date();
            this.month = moment(this.value).month()+1;
            this.year = moment(this.value).year();
        },      
        methods: {
            updateValue: function(value){
              this.$emit('input', moment().year(this.year).month(this.month-1).date(this.day));          
            }
        }       
  });

  new Vue({
      el: '#app',
      data: {
        parentDateModel:moment()
      }
    })

 
Пример на codepen.io

Добавить комментарий

Loading