x-text 不适用于 Alpine JS 中的 <H4> 标签。为什么？

Question

我只是想知道我的代码有问题还是只是一些 alpine js 功能有问题。这是我的代码

<div class="d-flex flex-column ml-4" x-data={ data(); }>
    <span class="d-flex flex-column">
        <h4 class="font-weight-bold" x-text="price"></h4>
    </span>
</div>

还有我的 JS 代码

<script type="text/javascript">
    function data()
    {
        return {
            price: 50
        }
    }

</script>

输出不打印任何内容。但是，如果我从

<h4 class="font-weight-bold" x-text="price"></h4> 

到

<p class="font-weight-bold" x-text="price"></p>

然后它工作正常，我得到了文本 50 作为输出。为什么会这样？我做错了什么吗？

Answer 1

我相信你的x-data 应该是x-data="data()"，这样{ price: 50 } 就是阿尔卑斯状态。

请参阅以下带有该更改的笔https://codepen.io/hugodf/pen/BaLERbe。