vuejs and symfony5 - link to public document

Question

I have a refered documents for my entity and render this in vuejs like this:

<span v-for="document in assignment.documents">
    <a target="_blank" href="">
        <small>{{ document.id }}.{{ document.extension }}</small>
    </a>
</span>

the documents are stored in public/uploads/documents/.

How can I generate a valid href to my documents like I can do this in twig:

<a target="_blank" href="{{ asset('/uploads/documents/' ~ document.id ~ '.' ~ document.extension) }}">
    {{ document.name }}
</a>

Answer 1

Create a binding to the href attribute and use both a string and a variable inside the binding, which is interpreted as a JavaScript expression:

<a :href="'/uploads/documents/' + document.id + '.' + document.extension">

:href is shorthand for v-bind:href

Answer 2

I prefer using ES2015 like this:

<a :href="`/uploads/documents/${document.id}.${document.extension}`">