Vue links are formatted weirdly-CodePudding

iam new to vue,inertia and laravel.

But i have gotten stuck and cannot figure out what the problem is even tho I try searching google and looking at videos.

I have this code

<div v-for="(seed, index) in seeds" :key="index">
Id {{ seed.id }} <inertia-link :href="'/fert/'   '{{ seed.id }}'">Go to seed</inertia-link>
</div>

And The first {{ seed.id }} outside of the links looks great, it shows the actual id. However then {{ seed.id }} within the link fomatts, so the link shows this:

Id 1<a href="/fert/{ seed.id }">Go to seed</a>

Why is it formatting inside the link but not outside? and how to I fix it?

Thanks in advance, and yes I am very noob. sorry

CodePudding user response：

You shouldn't use curly braces in attribute's value. Using :[attribue-name] already tells Vue that you gonna use some JS expressions in value

:href="'/fert/'   seed.id"

CodePudding user response：

You shouldn't use curly braces within the link. A nicer way to concatenate vars with text is to use template literal ES6 with backticks

<inertia-link :href="`/fert/${seed.id}`">Go to seed</inertia-link>