使用Alpine.data与x-for时无法同时访问对象多属性的问题

你遇到的问题核心在于AlpineJS的x-for指令对模板结构有严格要求：<template>标签内部必须只能有一个根元素。你当前的代码里，模板直接包含了两个同级的<div>，Alpine只会处理第一个根元素，第二个会被直接忽略，所以person.height的内容无法渲染出来。

修复方法 #

把模板里的两个<div>用一个父容器包裹起来，让模板拥有唯一的根元素，示例代码修改如下：

<div x-data="dropdown" class="wrapper">
  <div x-init="toggle" class="scroll-text">
    <h1>STAR WARS API</h1>
    <template x-for="person in data">
      <!-- 新增父容器作为唯一根元素 -->
      <div class="person-card">
        <div x-text="person.name"></div>
        <div x-text="person.height"></div>
      </div>
    </template>
  </div>
</div>

这样修改后，x-for会正常遍历每个person对象，将包含姓名和身高的完整容器渲染出来，两个属性的内容就能同时显示了。

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