使用AlpineJS实现可排序Div时出现moveLeft未定义的表达式错误

错误信息 #

Alpine Expression Error: moveLeft is not defined
Expression: "moveLeft($refs.box3)"

原问题代码 #

<div x-data>
  <div class="container">
    <div class="box" x-ref="box1">
      <button @click.prevent="moveLeft($refs.box1)">Move Left</button>
      <button @click.prevent="moveRight($refs.box1)">Move Right</button>
    </div>
    <div class="box" x-ref="box2">
      <button @click.prevent="moveLeft($refs.box2)">Move Left</button>
      <button @click.prevent="moveRight($refs.box2)">Move Right</button>
    </div>
    <div class="box" x-ref="box3">
      <button @click.prevent="moveLeft($refs.box3)">Move Left</button>
      <button @click.prevent="moveRight($refs.box3)">Move Right</button>
    </div>
    <!-- add more boxes as needed -->
  </div>
</div>

<script>
  window.onload = function () {
    const app = Alpine.data('app', {
      moveLeft: function (element) {
        const prevSibling = element.previousElementSibling;
        if (prevSibling) {
          element.before(prevSibling);
        }
      },
      moveRight: function (element) {
        const nextSibling = element.nextElementSibling;
        if (nextSibling) {
          nextSibling.before(element);
        }
      }
    });
  };
</script>

问题原因 #

1. 根元素的x-data属性未绑定到你定义的app数据对象，导致Alpine无法识别moveLeft/moveRight方法。
2. window.onload的包裹可能导致数据注册时机滞后于Alpine的初始化流程。

修正方案 #

基础修正版 #

修改根元素的x-data为x-data="app"，并简化脚本注册方式：

<div x-data="app">
  <div class="container">
    <div class="box" x-ref="box1">
      <button @click.prevent="moveLeft($refs.box1)">Move Left</button>
      <button @click.prevent="moveRight($refs.box1)">Move Right</button>
    </div>
    <div class="box" x-ref="box2">
      <button @click.prevent="moveLeft($refs.box2)">Move Left</button>
      <button @click.prevent="moveRight($refs.box2)">Move Right</button>
    </div>
    <div class="box" x-ref="box3">
      <button @click.prevent="moveLeft($refs.box3)">Move Left</button>
      <button @click.prevent="moveRight($refs.box3)">Move Right</button>
    </div>
    <!-- add more boxes as needed -->
  </div>
</div>

<script>
Alpine.data('app', {
  moveLeft(element) {
    const prevSibling = element.previousElementSibling;
    if (prevSibling) {
      element.before(prevSibling);
    }
  },
  moveRight(element) {
    const nextSibling = element.nextElementSibling;
    if (nextSibling) {
      nextSibling.before(element);
    }
  }
});
</script>

优化版（无需手动传参） #

通过事件对象直接获取当前按钮的父元素，省去x-ref和手动传参的步骤：

<div x-data="app">
  <div class="container">
    <div class="box">
      <button @click.prevent="moveLeft">Move Left</button>
      <button @click.prevent="moveRight">Move Right</button>
    </div>
    <div class="box">
      <button @click.prevent="moveLeft">Move Left</button>
      <button @click.prevent="moveRight">Move Right</button>
    </div>
    <div class="box">
      <button @click.prevent="moveLeft">Move Left</button>
      <button @click.prevent="moveRight">Move Right</button>
    </div>
    <!-- add more boxes as needed -->
  </div>
</div>

<script>
Alpine.data('app', {
  moveLeft() {
    const element = event.currentTarget.parentElement;
    const prevSibling = element.previousElementSibling;
    if (prevSibling) {
      element.before(prevSibling);
    }
  },
  moveRight() {
    const element = event.currentTarget.parentElement;
    const nextSibling = element.nextElementSibling;
    if (nextSibling) {
      nextSibling.before(element);
    }
  }
});
</script>

关键说明 #

• 确保Alpine.data的注册脚本放在Alpine核心库之后，且在DOM加载完成前执行（通常放在</body>标签前）。
• 优化版利用event.currentTarget直接获取触发事件的按钮元素，再获取其父元素（即目标box），代码更简洁且无需维护x-ref命名。

内容的提问来源于stack exchange，提问作者Gediminas Šukys