时间戳

首页 > 解决方案 > 在 AlpineJS 中事后刷新数据

alpine.js - 在 AlpineJS 中事后刷新数据

问题描述

我正在使用 Alpine 显示将更改的项目列表。但是我不知道如何告诉 Alpine 在新的项目从服务器返回后刷新列表：

<div x-data=" items() ">
    <template x-for=" item in items " :key=" item ">
        <div x-text=" item.name "></div>
    </template>
</div>

第一批“项目”很好，因为它们在items()函数中是硬编码的：

    function items(){
        return {
            items: [
                { name: 'aaron'  },
                { name: 'becky'  },
                { name: 'claude' },
                { name: 'david'  }
            ]
        };
    }

Alpine 之外的一些代码获取并接收一个全新的项目列表，我想显示它而不是原始集合。我不知道如何，甚至目前是否可行。感谢您的任何指示。

标签： alpine.js

解决方案

有3种方法可以解决这个问题。

  1. 将 fetch 移动到 Alpine.js 上下文中，以便它可以更新this.items
  function items(){
        return {
            items: [
                { name: 'aaron'  },
                { name: 'becky'  },
                { name: 'claude' },
                { name: 'david'  }
            ],
            updateItems() {
              // something, likely using fetch('/your-data-url').then((res) => )
              this.items = newItems;
            }
        };
    }
  1. （不推荐）从您的 JavaScript 代码中，访问rootElement.__x.$data并设置__x.$data.items = someValue
<script>
  // some other script on the page
  // using querySelector assumes there's only 1 Alpine component
  document.querySelector('[x-data]').__x.$data.items = [];
</script>
  1. 从您的 JavaScript 触发一个事件并从您的 Alpine.js 组件中监听它。

更新 Alpine.js 组件，注意x-on:items-load.window="items = $event.detail.items"：

<div x-data=" items() " x-on:items-load.window="items = $event.detail.items">
    <template x-for=" item in items " :key=" item ">
        <div x-text=" item.name "></div>
    </template>
</div>

触发自定义事件的代码，您需要填写有效负载。

<script>
let event = new CustomEvent("items-load", {
  detail: {
    items: []
  }
});
window.dispatchEvent(event);
</script>

推荐阅读