如何在Alpine.js中点击x-for元素后动态在div展示内容？

核心实现逻辑 #

通过Alpine.js的响应式变量记录选中元素的索引，再将展示区域的内容与该索引关联的数据源绑定，实现点击循环元素时自动更新展示内容。

原代码结构拆解 #

先看你给出的基础代码框架：

<div x-data="{
  products: [
    {title: 'test01', subtitle: 'lorem lorem lorem', tags: [{title: 'tag01'},{title: 'tag02'}]},
    {title: 'test02', subtitle: 'lorem lorem lorem', tags: [{title: 'tag03'},{title: 'tag04'}]}
  ],
  option: 0
}">

  <!-- 待动态更新的展示区域 -->
  <div class="view_dinamic_content">
    <span class="view_title"></span>
    <p class="view_description"></p>
    <ul class="view_tags">
      <li></li>
    </ul>
  </div>

  <!-- x-for循环渲染的列表 -->
  <ul>
    <template x-for="(product, index) in products" :key="index">
      <li x-text="product.title" @click="option = index"></li>
    </template>
  </ul>
</div>

1. 响应式数据定义（x-data）

• products：存储所有商品数据的数组，每个商品包含标题、副标题、标签集合
• option：记录当前选中商品的索引，默认值0对应第一个商品

2. 列表渲染与点击事件

• 用<template x-for="(product, index) in products">循环渲染商品列表，:key="index"为循环元素提供唯一标识（如果商品有唯一ID，建议用ID替代index，避免数组变动时的渲染异常）
• 每个<li>绑定@click="option = index"，点击时把当前商品的索引赋值给option，触发Alpine.js的响应式更新

补全动态展示区域代码 #

原代码的展示区域只是空结构，需要给每个元素绑定对应的数据，才能实现动态更新：

<div class="view_dinamic_content">
  <!-- 绑定选中商品的标题 -->
  <span class="view_title" x-text="products[option].title"></span>
  <!-- 绑定选中商品的副标题 -->
  <p class="view_description" x-text="products[option].subtitle"></p>
  <!-- 循环渲染选中商品的标签 -->
  <ul class="view_tags">
    <template x-for="tag in products[option].tags" :key="tag.title">
      <li x-text="tag.title"></li>
    </template>
  </ul>
</div>

展示区域绑定逻辑说明

• x-text="products[option].title"：通过option索引从products数组中取出选中商品的标题，自动渲染到<span>中
• 副标题的绑定逻辑和标题一致，替换为subtitle字段即可
• 标签列表再次使用x-for循环选中商品的tags数组，逐个渲染标签内容

完整运行流程 #

1. 页面加载时，option默认值为0，展示区域自动渲染第一个商品的内容
2. 点击任意商品列表项，option被更新为当前商品的索引
3. Alpine.js自动检测到option的变化，立即更新展示区域所有绑定了products[option]的内容，实现动态切换

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