Chrome DevTools设备模式下用Alpine.js x-sort指令出现'fruit is not defined'错误

原始代码 #

<!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/sort@3.x.x/dist/cdn.min.js"></script>
 
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/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>

问题描述 #

上述代码在桌面端正常运行，但在Chrome开发者工具的设备模式下拖动任意列表项时，会抛出fruit is not defined错误。

问题原因 #

在触摸模拟的设备模式下，Alpine.js的sort插件触发触摸拖动事件时，无法正确访问x-for循环中fruit变量的作用域，导致变量未定义报错。

解决方法 #

通过显式绑定数组元素的引用，避免依赖循环变量的作用域：

修改后的代码 #

<!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/sort@3.x.x/dist/cdn.min.js"></script>
 
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

<body>

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

修改说明 #

1. 在x-for循环中添加索引参数index，并设置:key="index"确保列表项的唯一性标识
2. 将x-sort:item改为显式引用数组中的元素fruits[index]，让插件直接从根数据对象中获取目标项，避免作用域丢失的问题

这样修改后，在Chrome设备模式下拖动列表项时，就能正常触发排序功能，不再出现变量未定义的错误。

内容的提问来源于stack exchange，提问作者Justin Chan