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

【问题标题】：How does alpineJS re-reder a template on data update?alpine JS 如何在数据更新时重新渲染模板？
【发布时间】：2021-12-30 00:54:30
【问题描述】：

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

【问题讨论】：

标签： alpine.js

【解决方案1】：

在您的案例/示例中，contacts 超出了 Alpine 的范围，一旦组件启动，它就处于自己的气泡中，组件范围之外的任何内容 x-data 都不会触发重新渲染。

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

【讨论】：

【解决方案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>

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

【讨论】：

get updatedState 不是必须在某种对象内吗？
你需要像这样在另一个函数中调用它：function blbl(){ return { get updatedState(){[...]}}}