Конфликт по шаблону Twig и Vue.js

Я делаю программу, используя Slim 2, которая использует Twig в качестве моего шаблонизатора. поэтому он использует синтаксис {{ foo }} в php файле. С другой стороны, я использую vue.js, он также использует {{ bar }}.

например.

Я собираюсь сделать двустороннюю привязку, ниже мой html-код.

<div class="container">
    Label Value: <label>{{ foo }}</label><br>
    Field Value: <input v-model="foo">
</div>

и вот мой код vue js.

new Vue({

    el: '.container',
    data: {
        foo: 'Hello world.'
    }
});

Итак, мир Hello должен быть в значении метки.

Вывод - это изображение ниже.

Что это не сработало, возможно, система считала это переменной веточки. Поэтому я проверил, передавая переменную в виде.

$app->get('/', function() use ($app) {
    $app->render('login.php', [
        'foo' => 'FROM PHP FILE'
    ]);
})->name('login');

Итак, я проверил, значение метки: показывает переменную, которую я передал из файла PHP, а не код VUE.

Трудно объяснить, но вы понимаете. Интересно, как обходить шаблон ветки и использовать {{ }} из vue.

Ответ 1

Просто измените разделители по умолчанию для vue. Вот как:

Vue.js 1.0

Определите разделители по всему миру.

Vue.config.delimiters = ['${', '}']

Документы

Vue.js 2.0

Определите разделитель на основе каждого компонента.

new Vue({
    delimiters: ['${', '}']
})

Документы

Ответ 2

В этом случае вы можете либо изменить маркер метки vue.js(если таковой имеется), либо использовать тег verbatim twig (что гораздо лучше, на мой взгляд), которые отмечают раздел как необработанный текст, который не следует оценивать парсером-поворотником. то есть:

{% verbatim %}
    new Vue({

        el: '.container',
        data: {
            foo: 'Hello world.'
        }
    });
{% endverbatim %}

В документах twig:

Стеновый тег отмечает разделы как сырые тексты, которые не должны быть разобран. Например, чтобы привести синтаксис Twig в качестве примера в шаблон, вы может использовать этот фрагмент:

Verbatim tag

Ответ 3

Я читал в другом подобном вопросе:

{{"{{vue.js variable here}}"}}

чтобы сделать его короче. Он работает в НЕКОТОРЫХ случаях для меня. Но, подумал, что вам все равно может понравиться...

Мне еще не удалось заставить его работать во всех областях моего кода.

Ответ 4

Для Vue JS 2 (не уверен насчет 1). Ты можешь использовать:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

Согласно документации: https://vuejs.org/v2/api/#v-text

Ответ 5

Просто голова. На Vue JS 2. Способ сделать это - добавить объект в Vue.

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}

Ответ 6

Кроме того, для тех, кто не хочет изменять разделитель VUE, вы можете изменить разделитель Twig (используя в этом примере фреймворк Silex):

$app->before(function() use ($app){
    $app['twig']->setLexer( new Twig_Lexer($app['twig'], [
        'tag_comment'   => ['[#', '#]'],
        'tag_block'     => ['[%', '%]'],
        'tag_variable'  => ['[[', ']]'],
        'interpolation' => ['#[', ']'],
    ]));
});

https://twig.symfony.com/doc/2.x/recipes.html#customizing-the-syntax

Ответ 7

Лучшее решение - не менять ни один из разделителей.

Вы можете использовать разметку vuejs в ветке, как это

{{ mytwigvar }} {{ '{{' }} myvuevar {{ '}}' }}

Это, очевидно, неоптимально, поэтому переопределите ваш загрузчик веток для предварительной обработки файлов и замените {{{ на {{ '{{' }} и }}} на {{ '}}' }} тогда вы можете написать разметку как

{{ mytwigvar }} {{{ myvuevar }}}

Гораздо приятнее.

Ответ 8

Вместо того, чтобы менять разделители, делать компоненты менее пригодными для повторного использования или использовать менее читаемые механизмы двойного экранирования, вы можете использовать функцию source Twig.

Функция источника возвращает содержимое шаблона без его рендеринга:
{{ source('template.html') }}
{{ source(some_var) }}

Пример:

<!-- path/to/twig_template.html.twig -->
<script type="text/x-template" id="my-template">
    {{ source('path/to/vue-template.html') }}
</script>

<script>
    Vue.component('my-component', {
        template: '#my-template'
    });
</script>

Ответ 9

Я использую VueJs v2 с синтаксисом ниже:

<img id="bookCover" style="border:none;width:200px" :src="book.cover">

Где book.cover является одним из полей myVueInstance. $data.book.

Здесь документы

Ответ 10

Это проверено и работает - vue js vars в шаблоне ветки:

    new Vue({
       el: '#app',
       delimiter: ['{}'], // any delimiter you would like
    })