如何让AlpineJS与PHP生成的动态x-data协同工作？

我在PHTML文件中编写了如下表格代码（伪代码），希望实现点击对应ID的按钮时，仅显示该ID对应的动态卡片内容，但目前该功能无法正常工作：

foreach ($_children as $child) {
echo '<table  x-data="{ showProduct-'. $child->getId() . ': false }">'

echo ' 
<tr>
 <td>
   <button x-on:click="showProduct-'. $child->getId() . ' = !showProduct-'. $child->getId() . '">
     Dropdown
   </button>
 </td>  
</tr>
'

echo '
<tr class="product-'. $child->getId() . '">
  <td class="product-card" colspan="8" x-show="showProduct-'. $child->getId() . '">
    Some Dynamic card content for every ID with PHP
  </td>
</tr>
    
</table>
'
}

核心问题是你给Alpine.js定义的变量名使用了连字符（-），而JavaScript的变量名不允许包含连字符，这会导致语法解析错误，Alpine.js无法识别这些变量，自然无法触发显示/隐藏逻辑。

修改步骤如下：

• 将变量名中的连字符替换为下划线（_）或者直接拼接成无分隔符的命名，比如showProduct_{$childId}
• 确保x-data初始化、按钮的x-on:click事件、以及卡片的x-show指令中使用的变量名完全一致

修改后的代码示例（方案一：带ID的变量名） #

foreach ($_children as $child) {
    $childId = $child->getId();
    // 使用下划线分隔变量名
    echo '<table x-data="{ showProduct_'. $childId . ': false }">';

    echo ' 
    <tr>
     <td>
       <button x-on:click="showProduct_'. $childId . ' = !showProduct_'. $childId . '">
         Dropdown
       </button>
     </td>  
    </tr>
    ';

    echo '
    <tr class="product-'. $childId . '">
      <td class="product-card" colspan="8" x-show="showProduct_'. $childId . '">
        Some Dynamic card content for every ID with PHP
      </td>
    </tr>
        
    </table>
    ';
}

更简洁的优化方案（方案二：独立组件变量） #

因为每个<table>都是独立的Alpine.js组件，内部变量不会互相干扰，所以可以直接用通用变量名（比如isOpen），不需要在变量名里携带ID，代码更简洁：

foreach ($_children as $child) {
    $childId = $child->getId();
    echo '<table x-data="{ isOpen: false }">';

    echo ' 
    <tr>
     <td>
       <button x-on:click="isOpen = !isOpen">
         Dropdown
       </button>
     </td>  
    </tr>
    ';

    echo '
    <tr class="product-'. $childId . '">
      <td class="product-card" colspan="8" x-show="isOpen">
        Some Dynamic card content for every ID with PHP
      </td>
    </tr>
        
    </table>
    ';
}

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