AlpineJS 异步调用渲染对象数组

Question

下面的代码片段试图用异步高山调用填充对象数组，但我得不到任何结果。 Hier是我尝试的。

HTML:

  <div x-init="experts.retrieveList" x-data="experts.list">
    <ul>
    <template x-for="item in experts.list" :key="item">
      <li>
        <div x-text="await item.address" ></div>
      </li>
    </template>
    </ul>
  </div>

外部 JS 文件

window.experts = {
  apiUrl: 'http://bdb.local:8991/api/',
  data: [],
  list: [],
  expertsForm: null,
  retrieveList: () => {
    const membersUrl = `${experts.apiUrl}members?include=user,association,affiliate`;
    experts.apiCalls(membersUrl)
  },
  filterByParams: () => {

  },
  apiCalls: async (url) => {
    let response = await fetch(url);
    experts.list = await response.json()

    return experts.list;
  },
}

这种情况有什么问题？

Answer 1

这段代码中有一些错误：

您不能在 x-data="experts.list" 中只使用 Alpine.js 组件的一部分。如果不在x-data中直接定义数据变量，那么一定是returns数据和方法的真实组件。
您不能将对象用作 key。它必须是字符串或数字，例如 item.id 或类似的内容。
x-text="await item.address" 似乎不正确。 item.address 应该是一个字符串，已经从 API.
在组件中您需要使用 this. 前缀来访问属性和方法。

假设您的 API returns 数据格式正确，这样的事情应该有效：

<div x-data="experts">
  <ul>
    <template x-for="item in list" :key="item.id">
      <li>
        <div x-text="item.address"></div>
      </li>
    </template>
  </ul>
</div>

以及外部文件中的组件：

const experts = {
    apiUrl: 'http://bdb.local:8991/api/',
    data: [],
    list: [],
    expertsForm: null,

    init() {
        const membersUrl = `${experts.apiUrl}members?include=user,association,affiliate`
        this.apiCalls(membersUrl)
    },

    filterByParams() {

    },

    async apiCalls(url) {
        let response = await fetch(url)
        this.list = await response.json()
    },
}

init()方法由Alpine.js自动执行。

AlpineJS 异步调用渲染对象数组

AlpineJS async call to render array of objects

arraylist

async-await

alpine.js