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

Question

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 文本。

Answer 1

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

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

Answer 2

也许这不是最有效的方法，但我遇到了类似的问题，为了解决它，我使用了受 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>

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

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

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

alpine.js