Search code examples
javascriptgoogle-chromealpine.js

Alpine.js: 'fruit is not defined' error when using x-sort directive in Chrome's Dev Tools device mode

<!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. How can I solve my problem?

Solution

  • Ok, so I finally found the solution. The solution is to just add x-bind:x-ignore="true" to the li. I'm not sure why it works though.