Using double curly Vue.js braces inside php string param

So I’m in the middle of mixing Vue.js, PHP & HTML and I’m running into a small issue – I have the following HTML section:

<button class="task button is-fullwidth is-flex" v-for="task, taskid in list.list">
    <span class="icon">
        <img src="<?= Path::o365("{{task.title}}" . '.svg'); ?>" />
    </span>
    <span class="task__handle">{{task.title}}</span>
</button>

Now everything works great except calling the Vue.js title inside the PHP code.. I have the following:

<img src="<?= Path::o365("{{task.title}}" . '.svg'); ?>" />

Is it possible to invoke double curly braces inside a PHP param? I have the HTML version (<span class="task__handle">{{task.title}}</span>) working perfectly fine.

All help is appreciated! I don’t even know if this is possible, so I’ll be learning.

Answer

Techincally you can’t.

But if what Path::o365() does is to convert a resource name into a url, you can make a workaround like this:

<img :src="`<?= Path::o365('${task.title}' . '.svg'); ?>'`" />

This will eventually resolves into something like this:

<img :src="`https://example.com/images/${task.title}.svg`" />

Which is actually a legit javascript string literal and also refers to the variable task.title