How to pass route parameter in a href using Alpine.js

Question

I am using Alpine.js for the first time inside of a Laravel project and would like to add an a href tag to a component however I am unsure how to route the parameter correctly

<template x-for="(post, index) in posts" :key="index">
    <a x-bind:href="post.id">
        <p class="mt-2 block text-sm font-medium text-gray-900 truncate pointer-events-none">
            <span x-text="post.text"></span>
        </p>
    </a>
</template>

does redirect to

/id 

and passes the id but I need to go to the named route posts and expect

/posts/id

if I add

 <a x-bind:href="posts/post.id">

the result is a redirect with

/posts/NaN

Answer 1

You can try this: <a x-bind:href="posts + '/' + post.id">