Alpine nested x-data

半世苍凉 提交于 2021-02-10 20:46:16

问题


I am trying to learn Alpine and I am testing out nested x-data. I came across a GitHub issue with nested x-data. They provided a solution which I wanted to try out myself. However, when I try to replicate the code, it didn't print anything. There are no errors in the console too. Can anyone guide me as to what I did wrong?

<div x-data="{foo: 'bar'}">
        <div x-data="{ }">
            <span x-text="foo"></span>
        </div>
</div>

I also tried using the $el property but it produced the same result.


回答1:


Nesting in Alpine.js doesn't work as it does in Vue/React. When you nest a component, it doesn't have access to the parent's data, only its own.

You need to add the foo property to the nested x-data like so

<div x-data="{ }">
        <div x-data="{ foo: 'bar' }">
            <span x-text="foo"></span>
        </div>
</div>



回答2:


You could use the $component/$parent helper from the Alpine Magic Helpers collection.



来源:https://stackoverflow.com/questions/64751994/alpine-nested-x-data

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!