laravel livewire 中未定义 Pikaday

Question

我在 laravel 中使用 pikaday datepicker 包并使用 npm 安装 pikaday 包。安装包后，我在 app.js 和运行 npm run dev 中包含了 require('pikaday/pikaday'); 来编译 js。

之后，我创建了一个自定义日期选择器组件，如下所示：

<input
    x-data
    x-ref="input"
    x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY', })"
    type="text"
    {{ $attributes }}
>

但我收到此错误：

app.js:1922 Uncaught ReferenceError: Pikaday is not defined
    at eval (eval at tryCatch.el.el (app.js:152), <anonymous>:3:36)
    at tryCatch.el.el (app.js:152)
    at tryCatch (app.js:139)
    at saferEval (app.js:147)
    at Component.evaluateReturnExpression (app.js:1762)
    at new Component (app.js:1518)
    at Object.initializeComponent (app.js:1919)
    at app.js:1864
    at app.js:1878
    at NodeList.forEach (<anonymous>)

app.js代码：

require('./bootstrap');
require('alpinejs');
require('moment/moment');
require('pikaday/pikaday');


const $ = require("jquery");
const dragula = require('dragula/dragula');
const sortable = require('sortablejs/Sortable');
const axios = require('axios').default;

let draggedElement;
let setBlocks = {};

// Sidebar
openSidebar = (flag) => {
    let sidebar = document.getElementById('sidebar');
    flag ? sidebar.classList.add('hidden') : sidebar.classList.remove('hidden');

    if (flag === true) {
        document.getElementById('sidebar-close').style.display = 'none';
        document.getElementById('sidebar-open').style.display = 'block';
    } else {
        document.getElementById('sidebar-close').style.display = 'block';
        document.getElementById('sidebar-open').style.display = 'none';
    }
};

// Sortable
if ($('#dropArea').is(':visible')) {
    const dragArea = document.getElementsByClassName('dragArea');

    for (let i = 0; i < dragArea.length; i++) {
        sortable.create(dragArea[i], {
            group: {
                name: 'shared',
                pull: 'clone',
                put: false
            },
            sort: false,
            filter: '.ignore-elements',
            onChoose: function (evt) {
                getBlocks(evt);
            }
        });
    }

    sortable.create(dropArea, {
        group: {
            name: 'shared',
            pull: 'clone',
        },
        sort: true,
        store: {
            set: function (sortable) {
                let blockData = sortable.el.childNodes;

                for (let index = 0; index < blockData.length; index++) {
                    let uid = blockData[index]['id'];
                    let html = blockData[index]['innerHTML'];

                    if (index === blockData.length - 1) {
                        setBlocks[index] = { 'uid': uid, 'html': html }
                        updateBlocks(setBlocks);
                        console.log(setBlocks);
                    }
                }
            }
        }
    });

    // Get blocks HTML
    getBlocks = (evt) => {
        axios.get('/api/getBlocks/' + evt.item.id).then(function (response) {
            evt.item.innerHTML = response.data[0].html;
        }).catch(function (error) {

        });
    };

    // Update blocks HTML
    updateBlocks = (blocks) => {
        axios.post('/api/setBlocks', {
            user_id: $('meta[name="uid"]').attr('content'),
            blocks: blocks
        }).then(function (response) {

        }).catch(function (error) {

        });
    }
}

我找不到问题所在，有人可以指导我解决问题所在吗。

Answer 1

您需要将 Pikaday 实例附加到 window 以便可以使用。

您可以直接附加它，也可以为 Pikaday 创建一个变量以备不时之需。

resources/js/app.js

let Pikaday = require ('pikaday/pikaday');
window.Pikaday = Pikaday;

laravel livewire 中未定义 Pikaday

Pikaday is not defined in laravel livewire

npm

laravel

pikaday

laravel-mix

laravel-livewire