Getting a 'fruit is not defined' error when using x-sort directive in Chrome's Dev Tools device mode #4259

Justin-del · 2024-06-07T11:03:25Z

Justin-del
Jun 7, 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
 
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>

<body>

    <ul x-data="{ fruits:['durians','apples','oranges'] }" x-sort>
        <template x-for="fruit in fruits">
            <li  x-text="fruit" x-sort:item></li>
        </template>
    </ul>
</body>
</html>

The code above works well when I'm just running it normally on my computer. However, I get a fruit is not defined error when I try to drag any of the items in Chrome's Dev Tools device mode.

SimoTod · 2024-06-09T18:20:40Z

SimoTod
Jun 9, 2024
Collaborator

Do you have any local plugins that would conflict with Alpine (like the old Alpine dev tools). In theory, there shouldn't really be any difference if you open the page pretending to be a different device in chrome.

1 reply

Justin-del Jun 9, 2024
Author

No, Simo Tod. I don't have any local plugins that would conflict with Alpine.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting a 'fruit is not defined' error when using x-sort directive in Chrome's Dev Tools device mode #4259

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Getting a 'fruit is not defined' error when using x-sort directive in Chrome's Dev Tools device mode #4259

Justin-del Jun 7, 2024

Replies: 1 comment · 1 reply

SimoTod Jun 9, 2024 Collaborator

Justin-del Jun 9, 2024 Author

Justin-del
Jun 7, 2024

Replies: 1 comment 1 reply

SimoTod
Jun 9, 2024
Collaborator

Justin-del Jun 9, 2024
Author