Resolving vue variable in quoted string

support
1

…experimenting with Vue - first just for context, we set the Vue delimiters to square brackets [[ ]]so that they don’t conflict with mustache {{ }}

Here’s an example fragment with 2 Vue variables:

<span class="px-2 py-1 [[ card.issuecolor ]]" > <span class="ml-2 text-sm font-medium">[[ card.issuetype ]]</span> </span>

A Vue variable is resolved correctly in the Hugo template when it is simple text, as in [[ card.issuetype ]] , but when the variable is in the context of a quoted string, as in the class value above [[ card.issuecolor ]], it is rendered as a literal.

Attempting to resolve the Vue variable to a template variable doesn’t work, as in:
{{ $v := [[ card.issuecolor ]] }}
results in unexpected "[" in command

Any clues on how to resolve our Vue variables in the context of quoted strings?

2

Vue is a JavaScript framework. JS runs after the page is built by Hugo.

This works because Hugo leaves the [[...]] alone. After Hugo is done building your page, then Vue can process it and do whatever it is supposed to.

3

Of course, yes. Sometimes we need to just take a step back and look at what’s going on. That’s helpful.

4

The solution is in using the correct Vue notation for an attribute variable, as in :class="card.issuecolor"

In the context of the example fragment from above:

<span class="px-2 py-1 " :class="card.issuecolor"> <span class="ml-2 text-sm font-medium">[[ card.issuetype ]]</span> </span>

Hugo leaves the :class=".." bit alone, and Vue correctly resolves the variable to value, lovely.