如何在alpinejs中的div中显示x-for的元素

Answer 1

您应该能够使用

option

值作为索引来访问

products

数组。

products[option]

将给出所选项目：

<script src="https://unpkg.com/[email protected]" integrity="sha384-XBJ5+bq4ga1+0s+J4sl6njqQ9C/YIfKeQw18HypSuGEaPm1g/VWaNdsQ5d3sE1qi" crossorigin="anonymous"></script>

<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" 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">
        <li x-text="tag.title"></li>
      </template>
    </ul>
  </div>

  <ul>
    <template x-for="(product, index) in products" :key="index">
     <li x-text="product.title" @click="option = index">
     </li>
    </template>
  </ul>
</div>