Escape Blade templating limited to text with VueJs?

Question

Im facing something strange.

I have something like this :

<span class="label label-@{{type}}" v-on:mouseover="changeType">@{{type}}</span>

With data: { type: 'primary' } for exemple.

However, the output of this once treated by Laravel is

<span class="label label-{{type}}">primary</span>

Why is the first {{type}} not recognise and why is it not change?

Is there a way to fix that?

Edit:

So it was due to the depreciation of interpolation inside attribute.

The solution is to use something like :class="type" .

However how do you add something before type? Since I want label- + "type"

Answer 1

您应该使用简单的:class元素将其绑定：

<span class="label" :class="'label-' + type">primary</span>