alpine.js数据()x-数据指令
alpine.js数据()x-数据指令
提问于 2022-04-20 09:38:56
我使用alpine.js v3和一些模块来处理数据
import Foo from './foo';
import Bar from './bar';
window.Alpine = Alpine;
window.Alpine.data('data', () => ({
foo: Foo(),
bar: Bar(),
}));
window.Alpine.start();<body x-data="data">每当我尝试访问数据<button @click="data.foo.doSomething()">时，我都会得到错误。
高寒表达式错误:数据未定义
我是否必须将它添加到x-data指令中？
(最新情况)
以及如何从另一个组件访问这些数据，例如获取Foo组件的Foo并调用Bar方法
window.Alpine.bind('SomeButton', (name) => ({
'x-init'(){
const data = window.Alpine.$data;
if(data.foo.status === 'open'){
data.bar.doSomething();
}
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-20 09:50:08
使用Alpine.data()，您可以定义组件。之后，您可以通过x-data直接访问应用它的元素中的组件的所有属性。在这里，data是组件，所以您不必在其属性前加上data.
<div x-data="data">
<button @click="foo.doSomething()">Call doSomething()</button>
</div>回答第二个问题:由于您有一个应用于最顶层元素(body)的“全局”组件，每个子组件都可以访问这个父组件的属性。因此，在SomeButton“绑定对象”-type组件中，我们可以使用this.前缀在组件的定义中访问它们。
window.Alpine.bind('SomeButton', () => ({
'@click'() {
if (this.foo.status === 'open') {
this.bar.doSomething()
}
}
})在这里，我们将我们的逻辑附加到单击事件:如果状态为“打开”，则调用bar.doSomething()。
<div x-data="data">
<button x-bind="SomeButton">Call bar.doSomething() if status is 'open'</button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71937409
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号