如何在Splide.js事件中修改Alpine.js的变量？

你之前的写法存在两个核心错误：

1. 重复调用Alpine.data('titles')是重新注册组件，并非修改已挂载到页面的组件实例数据，完全起不到修改变量的作用。
2. Alpine.$data不是Alpine的合法全局API，调用Alpine.$data.titles.toggle自然会失效。

下面是两种可行的解决方法，可根据你的Alpine版本选择：

方法一：通过DOM元素获取组件实例（兼容所有Alpine版本） #

首先确保你的Alpine组件已挂载到DOM上，比如：

<div x-data="titles">
  <div class="splide">
    <!-- Splide滑块内容 -->
  </div>
  <!-- 示例标题元素，根据变量控制显示 -->
  <div x-show="slidetitle_1">滑块1标题</div>
  <div x-show="slidetitle_2">滑块2标题</div>
</div>

然后修改Splide的事件代码：

var splide = new Splide('.splide').mount();
// 找到挂载了titles组件的DOM元素
const titlesElement = document.querySelector('[x-data="titles"]');

splide.on('active', function (slide) {
  // Splide的slide.index从0开始，转成你命名的1、2、3...格式
  const targetIndex = slide.index + 1;

  // 可选：先把所有标题状态重置为false，避免多个标题同时显示
  Object.keys(titlesElement.__x__.$data).forEach(key => {
    if (key.startsWith('slidetitle_')) {
      titlesElement.__x__.$data[key] = false;
    }
  });

  // 方式1：直接修改对应变量
  titlesElement.__x__.$data[`slidetitle_${targetIndex}`] = true;

  // 方式2：调用你定义的toggle方法（二选一即可）
  // titlesElement.__x__.$data.toggle(targetIndex);
});

方法二：用Alpine 3.x的Alpine.findAPI（更简洁） #

如果你的项目使用Alpine.js 3.x版本，可借助官方提供的Alpine.find方法直接获取组件实例：

var splide = new Splide('.splide').mount();

splide.on('active', function (slide) {
  const targetIndex = slide.index + 1;
  // 获取titles组件实例
  const titlesComponent = Alpine.find('[x-data="titles"]');

  // 重置所有标题状态（可选）
  Object.keys(titlesComponent.$data).forEach(key => {
    if (key.startsWith('slidetitle_')) {
      titlesComponent.$data[key] = false;
    }
  });

  // 修改变量或调用方法
  titlesComponent.$data[`slidetitle_${targetIndex}`] = true;
  // titlesComponent.$data.toggle(targetIndex);
});

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