高山嵌套 x 数据 [英] Alpine nested x-data

问题描述

我正在尝试学习 Alpine，并且正在测试嵌套的 x 数据.我遇到了一个带有嵌套 x-data 的 GitHub 问题.他们提供了一个我想自己尝试的解决方案.但是，当我尝试复制代码时，它没有打印任何内容.控制台中也没有错误.任何人都可以指导我做错什么吗?

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

我也尝试使用 $el 属性，但它产生了相同的结果.

解决方案

正如@LaundroMat 所提到的，辅助函数就是为这些目的而构建的.

<div x-data="{localFoo: 'local bar'}"><span x-text="$parent.foo"></span><p x-text=localFoo"></p>

codepen 供参考

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.

解决方案

As @LaundroMat mentioned, helper functions are built for these purpose.

<div x-data="{foo: 'bar'}">
    <div x-data="{localFoo: 'local bar'}">
        <span x-text="$parent.foo"></span>
        <p x-text="localFoo"></p>
    </div>
</div>

codepen for reference

这篇关于高山嵌套 x 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！