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>
每次您的数据更改时,您的循环都会更新数据
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>
每次您的数据更改时,您的循环都会更新数据