href tag breaks vue template component-CodePudding

I am trying to add a href link with a variable in my vue template, for some reason it keeps breaking and I have no clue why, it's trying to reference it as a variable rather than a link. the issue is with the "/post/update" href. the "/view-user/ post.user.id" works fine

<template>
<div id="content">
    <div >
        <h3>{{post.title}}</h3>
        <p>{{post.content}}</p>
        <a :href="/view-user/   post.user.id">
            {{post.user.username}}
        </a>
        <p>{{ post.created_at.split(".")[0] }}</p>
        <a :href="/post/update/   post.id">Edit</a>
    </div>
    <hr>
    <comment :id="id"/>
</div>

CodePudding user response：

The static part of the href value should be wrapped by '' as string :

 <a :href="'/view-user/'   post.user.id">

or string template :

 <a :href="`/view-user/${post.user.id}`">

in your case it's evaluated as expression.