nikoyar
@nikoyar

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

Вводная:
никакие системы сборки не используются
Имеем:
На страницу подключен vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Подключен этот компонент https://github.com/dbrekalo/vue-date-pick/blob/mas... (так же через 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
И вот как это сделать - не пойму
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
HTML:
<div id="app">
<date-pick
            v-model="date1"
            :pick-time="true"
            :selectable-year-range="{ from: 2000, to: 2020 }"
            :format="'DD.MM.YYYY HH:mm'">
    </date-pick>
<date-pick
            v-model="date2"
            :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: {
            date1: '',
            date2: '',
        },
        components: {
            'date-pick': VueDatePick
        }
    })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы