问题
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