时间戳

首页 > 解决方案 > 从父组件访问当前数据迭代

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

问题描述

我想从模板访问当前数据迭代，而且我需要来自迭代元素的某些 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-forin 子元素（请参阅 html 部分的评论）。但我无法访问它，也许是一些范围问题阻止我这样做。从这个区域开始<div @click.away="open = false" class="relative" x-data="{open : false}">

标签： javascripthtmlalpine.js

解决方案

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

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

将返回数据变量。

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

this.data[0].num应该做的伎俩。

PS您的代码片段缺少一个右括号（}）

在 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>

推荐阅读