Как корректно инициализировать компонент в Vue?

Question

Вводная: никакие системы сборки не используются

Имеем: На страницу подключен vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Подключен этот компонент https://github.com/dbrekalo/vue-date-pick/blob/master/dist/vueDatePick.js (так же через script) HTML:

<div id="app">
<date-pick
            v-model="date"
            :pick-time="true"
            :selectable-year-range="{ from: 2000, to: 2020 }"
            :format="'DD.MM.YYYY HH:mm'">
    </date-pick>
</div>

JS

new Vue({
        el: '#app,
        data: {
            date: ''
        },
        components: {
            'date-pick': VueDatePick
        }
    })

Проблема: В общем - то это работает, но нет возможности переиспользовать компонент: если вставить

<date-pick v-model="date"></date-pick>

на страницу дважды, то контент будет идентичный и это понятно почему - надо передать в компонент

data: function(){
 return {
date: ''
}
}

а не в объект data самого экземпляра vue

И вот как это сделать - не пойму

Answer 1

Для того, чтобы использовать v-model вам необходимо сделать пропс у компонента value. И эимтнуть событие input. v-model - это двунаправленная связь.

Пример (вам необходимо сделать на подобии):

Vue.component('select-city', {
  props: {
    value: {
      type: Number,
      default: null,
    },
  },
  template: `
      <div>
        <span
         @click="emit"
        >
          {{ value }}
        </span>
      </div>`,
  data: function() {
    return {
      counter: 0,
    };
  },
  methods: {

    emit(event) {
      this.$emit('input', ++ this.counter);

      return this;
    },
  },
});

new Vue({
  el: '#app',
  data() {
    return {
      counter_1: 0,
      counter_2: 0,
      counter_3: 0,
    };
  },
})

.block {
  padding: 5px;
  width: 50px;
  background: aquamarine;
  text-align:center;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <div class="block">
    <select-city
      v-model="counter_1"
    />
  </div>

  <div class="block">
    <select-city
      v-model="counter_2"
    />
  </div>

  <div class="block">
    <select-city
      v-model="counter_3"
    />
  </div>
</div>

Подробнее об использовании v-model в собственных компонентах.

Answer 2

Остановился на таком варианте

HTML

<date-pick v-model="date1"></date-pick>
<date-pick v-model="date2"></date-pick>

JS

new Vue({
        el: '#app',
        data: {
            date1: '',
            date2: '',
        },
        components: {
            'date-pick': VueDatePick
        }
    })

БЛОГ НА HUSL

Как корректно инициализировать компонент в Vue?

Ответы (2 шт):