Question

我试图部署一个名为bliblidotcom/vue-rangedate-picker的Vue功能。

到目前为止，我已经这样做了：使用npm安装的功能：

npm install vuejs-datepicker --save

将这些行添加到app.js

中

import Vue from 'vue';
import VueRangedatePicker from 'vue-rangedate-picker';
Vue.use(VueRangedatePicker);

将此行添加到我的组件：Orders.vue

<rangedate-picker @events="events"></rangedate-picker>

但是，我收到了：

dash.2f99f386cf46c2486e27.js：51996 [Vue warn]：属性或方法   ＆＃34;事件＆＃34;未在实例上定义，但在呈现期间引用。   确保此属性在数据选项中是被动的，   或者对于基于类的组件，通过初始化属性。看到：   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

[Vue警告]：nextTick出错：＆＃34; TypeError：无法读取属性   ＆＃39; _withTask＆＃39;未定义＆＃34;   TypeError：无法读取属性＆＃39; _withTask＆＃39;未定义的

这是Orders.vue：

        </div>
    </div>
</template>
<script>
    export default {
        props: ['initUser'],
        data() {
            return {
                endpoint: '/approve',
                orders: [],
                btn: 'Update List',
                token: "",
                searched_term: "",
                today: false,
                from: "",
            }
        },
        computed: {....

这是app.js：

window.dashApp = new Vue({
    el: '#app',
    mounted(){
        this.$root.$on('mapCreated', function (map) {
            this.currentMap = map;
        });
    },
    data() {
        return {
            currentMap: null
        }
    },....

Answer 1

您需要为活动定义处理程序。您的组件中未定义events。目前，vue-rangedate-picker仅支持所选活动

    <rangedate-picker @selected="onSelect"></rangedate-picker>

Order.vue

中的

    import VueRangedatePicker from 'vue-rangedate-picker';

     ...
    components: {
       'rangedate-picker': VueRangedatePicker
    }
    methods: {
      onSelect(data) {
        console.log(data)
      }
    }

如何部署第三方VueJS组件？

1 个答案: