CODEWITHSUNDEEP
alpine.js
Jane
Jane

Reputation: 157

x-text is not working on <H4> tag in Alpine JS. Why?

I just want to know is there an issue with my code or just some alpine js functionality. Here is my code

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

and my JS code

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

</script>

The output doesn't print anything. But, if I change the line from

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

to

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

then it works fine and I got the text 50 as output. Why is this happening? Is there anything wrong that I am doing?

Upvotes: 0

Views: 2303

Answers (1)

Hugo
Hugo

Reputation: 3888

I believe your x-data should be x-data="data()" so that { price: 50 } is the Alpine state.

See the following pen with that change https://codepen.io/hugodf/pen/BaLERbe.

Upvotes: 1

Related Questions