vue.js - Vue.js - 努力让 DatePicker 工作的组件

Question

我对 Vue.js 比较陌生，所以请原谅我的 janky 代码 :-)！但是我遇到了一个名为 vuejs-datepicker 的组件的问题。我通过 npm 安装了它，无论我尝试什么，我都会不断收到错误消息：

未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我觉得我已经尝试了一切，但答案可能正盯着我看。

老实说，我尝试了各种方法，但总是遇到同样的错误。我可能在这里做了一些非常基本的错误。我试过打电话给<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>

理想情况下，我希望显示日期选择器。如果有人能指出我正确的方向，那就太好了。正如我所说，我的 vue.js 自学大约需要 3 个小时。

标签： vue.jsvuejs2vue-component