This is quite an annoying little thing. Adding v-pre to each html node where curly brackets should not be parsed is easy to forget and feels like the days where you had to wrap each parameter in your html with htmlentities.
It would be cool if there was an option to say at the root of node of your app say: v-pre and on every spot where you do need to parse the {{ }} tags you add another tag like v-parse or whatever.
Another quick and dirty solution could be to just strip out all curly brackets from your inputs in a middleware. Equal to the middleware that is automatically applied to 'trim' all input values. This only works for new values and not for existing values in your database of course.
<?php
namespace App\Http\Middleware;
use Illuminate\Foundation\Http\Middleware\TransformsRequest;
class RemoveCurlyBrackets extends TransformsRequest
{
/**
* The attributes that should not be undone from curly brackets.
*
* @var array
*/
protected $except = [
//
];
/**
* Transform the given value.
*
* @param string $key
* @param mixed $value
* @return mixed
*/
protected function transform($key, $value)
{
if (in_array($key, $this->except, true)) {
return $value;
}
return str_replace(['{{', '}}'], '', $value);
}
}
Another better solution would be to do the following. See this comment on github for a full reply https://github.com/vuejs/vue/issues/4223#issuecomment-294864675. I've tested it and it seems to do the job.
Below code is also available as a package mentioned in the other topic. https://github.com/alfa-jpn/vue-disable-interpolation
const noDelimiter = {replace: () => '(?!x)x'}; // return a non-matching regexp.
const app = new Vue({
el: '#vue-app',
delimiters: [noDelimiter, noDelimiter],
components: {
MyComponent,
},
});