从父组件访问当前数据迭代

Question

我想从模板访问当前数据迭代，并且我需要来自迭代元素的某些 id。

<template x-for="(datas, idx) in data">
                <tr x-bind:class="idx % 2 == 0 ? 'bg-white' : 'bg-green-100'" class="border-4 border-gray-200">
                    <td class="text-center py-2 w-2">
                        <span x-text="`${parseInt(idx) + 1}`"></span>
                    </td>
                    <td class="text-center py-2">
                        <strong x-text="datas.name"></strong>
                        <br />
                        <i x-text="`Num : ${datas.num}`"></i>
                    </td>
                    <td class="text-center py-2" >
                        <!--I need access datas.num in this area v--->
                        <div @click.away="open = false" class="relative" x-data="{open : false}">
                            <button @click="open = !open" class="bg-gray-300 flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                                <span>Action</span>
                                <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                            </button>
                            <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48" style="z-index: 1;">
                                <div class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
                                    <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#"><i class="fas fa-pencil-alt"></i> Edit</a>
                                    <a @click="$parent.deleteData(datas.num)" class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-white-900 focus:text-white-900 hover:bg-red-200 focus:bg-red-200 focus:outline-none focus:shadow-outline" href="#"><i class="fas fa-trash-alt"></i> Delete</a>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </template>

这是data的定义：

   function dataInit(){
     return {
       data : [
       {
         num : 10,
         name : "josh"
       }
       ],
       deleteData(id){
          //do something with current id selection
       }
    }
   }

我确实可以访问父级中的 deleteData(id) 方法，因为使用了 Alpine 的魔法助手，但我无法访问循环块中的 datas.num 或 $parent.deleteData(datas.num) 变量，即使它们在模板块内。我该如何解决这个问题？

编辑： *假设数据循环的 x-data 已在上层元素中设置
** 我的意思是，我想访问子元素中的x-for（参见 html 部分的 cmets）。但我无法访问它，也许是一些范围问题阻止我这样做。从本区开始<div @click.away="open = false" class="relative" x-data="{open : false}">

Answer 1

您的deleteData 函数在一个对象内，因此引用该对象内的其他元素需要this 引用自身：

deleteData(id) {
    let data = this.data;
}

将返回数据变量。

另外，您已将数据定义为对象数组。因此，要访问 num 变量，您必须首先访问数组中的特定对象，然后才能获得 num 值：

this.data[0].num 应该可以解决问题。

附：您的代码 sn-p 缺少一个右括号 (})

在 Alpine 中，您不需要引用该对象，因为您应该在某处将其设置为 x-data，然后您可以从中对数据做任何您想做的事情。

<div x-data="dataInit()">
    <!-- Loop the array of data -->
    <template x-for="singleData in data">
        <div>
            <span x-text="singleData.num"></span>
        </div>
    </template>
</div>