Vue.js - изо всех сил пытается заставить компонент для DatePicker работать - PullRequest
Новая
       11

Vue.js - изо всех сил пытается заставить компонент для DatePicker работать

0 голосов
/ 27 марта 2019

Я относительно новичок в Vue.js, так что прошу прощения за мой дрянной код :-)! Но у меня проблема с компонентом vuejs-datepicker. Я установил его через npm и, что бы я ни пытался, я получаю сообщение об ошибке:

Неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

Я чувствую, что перепробовал все, но ответ, вероятно, смотрит мне прямо в лицо.

Я буду честен, я пробовал разные вещи, но продолжаю получать ту же ошибку. Я, вероятно, сделал что-то очень плохое здесь. Я пытался назвать это <Datepicker></Datepicker> и <datepicker></datepicker>

Мой компонент 


<template>
  <div>
    <form>
        <div v-if="step === 1">

            <h1>Step One</h1>
            <div>
                <legend for="name">Your Name:</legend>
                <input id="name" name="name" v-model="data.name" />
            </div>

            <div>
                <legend for="email">Your Email:</legend>
                <input id="email" name="email" type="email" v-model="data.email" />
            </div>

            <div>
                <legend for="date">Departure Date:</legend>
                <datepicker v-model="data.departureDate" :disabledDates="data.disabledDates"></datepicker>
            </div>

            <button @click.prevent="next()">Next</button>

        </div>

        <div v-if="step === 2">

            <ul id="list-icons">
                <li class="list-icons__item" v-for="holidayType in holidayTypes" :key="holidayType.title">
                    <input type="checkbox" :value=holidayType.title v-model="data.checkedTypes" />
                    <label class="check">
                        <i :class=holidayType.icon></i>
                        <h3>{{ holidayType.title }}</h3>
                        <small>{{ holidayType.description }}</small>
                    </label>
                </li>
            </ul>

            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>

        </div>

        <div v-if="step === 3">

            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="submit()">Save</button>

        </div>

    </form>

    <br/><br/>Debug: {{data}}
    </div>




</template>

<script>

import Datepicker from 'vuejs-datepicker';

export default {

  data () {

    return {
         step:1,

         components: {
            Datepicker
         },

         data: {
             departureDate: new Date(),
             name: '',
             email: '',
             checkedTypes: [],
             disabledDates: {
                  from: new Date()
             }
         },

         holidayTypes: [
            { title: 'Adult Only', icon: 'fal fa-user', description:'' },
            { title: 'Kids Club', icon: 'fal fa-child', description:'' },
            { title: 'Swimming Pool', icon: 'fal fa-swimming-pool', description:'On site swimming pool' },
            { title: 'Water Park', icon: 'fal fa-swimmer', description:'' },
            { title: 'Accessibillity Friendly', icon: 'fal fa-wheelchair', description:'' },
            { title: 'Beach/Seafront Location', icon: 'fal umbrella-beach', description:'' },
         ]

    }
  },

  methods: {
    /*click() {
      this.$emit('send', 2)
    }*/
    prev() {
        this.step--;
    },
    next() {
        this.step++;
    },
  }
}

</script>

В идеале я хочу показать Datepicker. Если кто-нибудь может указать мне правильное направление, это было бы здорово. Как я уже сказал, я занимаюсь самообучением vue.js около 3 часов.

...