alpine JS 如何在数据更新时重新渲染模板?

How does alpineJS re-reder a template on data update?

AlpineJS 如何重新渲染模板?

<script>let contacts = [];</script>
<div x-data="{ persons: contacts }">
    <template x-for=" person in persons ">
        <div x-text=" person "></div>
    </template>            
    <button x-on:click="contacts.push('Jack'); persons = contacts; console.log(persons.length);">Click</button>
</div>

我原以为 div 点击时会有多个 Jack 文本。

在你的 case/example contacts 中不在 Alpine 的范围内,一旦组件启动它就在它自己的气泡中,组件范围之外的任何东西 x-data 都不会触发重新渲染。

如果将 contacts.push('Jack'); 更改为 persons.push('Jack');,将触发重新渲染。

也许这不是最有效的方法,但我遇到了类似的问题,为了解决它,我使用了受 this 启发的 get 函数。

我的用例如下:

JS:

get updatedState() {
      var config_state = [];
      #update your data here 
      return config_state;
}

HTML:

<template x-for="config in updatedState">
#Do what you want here
</template>

每次您的数据更改时,您的循环都会更新数据