Alpine js x-on 表达式

Question

在用于单击的 Alpine JS x-on 事件处理程序中，我得到了一个我不理解的行为。这很好用：

x-on:click="
    ancestor = trail[index];
    trail = trail.slice(0, index);
    loading = true;
    collection = await getCollection(ancestor.id)
    loading = false;
"

但是这个

x-on:click="
    if (item.type === 'Collection') {
        trail.push({
            id: collection.id,
            label: collection.label.sv[0]
        });
        collection = await getCollection(item.id)
    } else {
        image.present = true;
        image.id = item.id
    }
"

仅当我在 if 表达式之前使用例如一个 console.log

console.log(`--- Item type: ${item.type}`);

if有什么特别之处？有更好的方法吗？

Answer 1

您在 if 块中有一个异步函数调用，因此整个块都需要等待。由于业务逻辑对于一行来说已经太复杂了，最好在带有Alpine.data()的组件中为它创建一个单独的方法，并在@click指令中调用它。

<div x-data="MyComponent()">
  <button @click="getItems">Get items</button>
</div>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('MyComponent', () => ({
    // Data definitions
    trail: [],
    item: {},
    image: {},
    collection: {},

    async getItems() {
      if (this.item.type === 'Collection') {
        this.trail.push({
          id: this.collection.id,
          label: this.collection.label.sv[0]
        })
        this.collection = await getCollection(this.item.id)
      } else {
        this.image.present = true
        this.image.id = this.item.id
      }
    }
  }))
})
</script>

Alpine js x-on 表达式

Alpine js x-on expressions

alpine.js