Как реализовать вывод blade кода внутри blade чтобы vue не выдавал ошибки на переменных(или как экранировать фигурные скобки в Vue)?

Question

[Евгений Ромашкан]

{!! !!} без проблем отображает код типа {!! $var !!}, но если внутри $var есть строка ' {{ $var2 }}' ($var = '{{ $var2 }}'), бремя отобразить перменную внутри {{ .. }} принимает на себя vue, и в итоге даёт ошибку

[Vue warn]: Property or method "$var" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

Можно ли указать vue что переменные внутри, допустим, определённого div нужно экранировать?
Такой код vue также не может отрендерить:

<div class="body"><span v-html="{!! $var !!}"></span></div>

UPD: Пока что для себя найдено 2 варианта
1. Не рендерить из php а передавать данные в vue и показывать через v-html
2. Установить другие разделители(delimiters) для переменных Vue:

const app = new Vue({
    delimiters: ['${', '}'],
    el: '#app'
});

.
2 вариант плох тем, что у меня один экземпляр vue на сайт, и как то не очень хотелось бы придерживаться на всём сайте нестандартной записи переменных..

Comments

[Александр]

Так, что ли?
{!! '{{' . $var . '}}' !!}

И не совсем понимаю, почему не подходит просто '{{ $var }}'? Сам блейд будет экранировать.

[Евгений Ромашкан]

Александр, В переменной $var есть html теги(безопасные типа заголовков, парагрофов, <b>и т.п.(от опасных переменная очищена). Их нужно применять, но помимо этого в переменной может быть абсолютно любой текст, в т.ч. код, и, например, blade шаблон(который нужно вывести полностью как код).

[Александр]

Евгений Ромашкан, тогда как по мне, логичнее всего создать свою blade директиву и делать вывод через неё, например так:
@code($var)

Сама директива должна быть описана примерно так:

Blade::directive('code', function($var)
{
    return '<?php echo '{{' . $var . '}}' ?>';
});

[Евгений Ромашкан]

Александр, А проблема не в blade. Когда текст(код) попадает на страницу, vue находит там фигурные скобки и пытается их разобрать.. Пока что решил заменой delimiters

const app = new Vue({
    delimiters: ['${', '}'],
    el: '#app'
});

Answer 1

[Евгений Ромашкан]

UPD: Нашел ответ. Нужно использовать v-pre

Answer 2

[vism]

@{{ }}

Comments

[Евгений Ромашкан]

Вы бы хоть суть вопроса прочитали прежде чем отвечать..