Как сделать реактивность в yii2?

Question

[Рустам Акимов]

Хочу использовать реактивность из vue для реактивной смены текста на странице, поле формы вывожу так

<?= $form->field($model, 'example', [
                            'options' => [
                                'v-model' => 'example'
                            ]
                        ])->label(false) ?>

И вывожу vue вот так:

<script>
    var app = new Vue({
        el: '#fonter',
        data: {
            example:<?= '\'' . $model->example . '\''?>
        }
    })
</script>

Но после вывода у ActiveField пропадает v-model, а vue не инициализирует example
Знает кто как это подружить?

Comments

[Дмитрий]

Добрый вечер.
Смотрите ошибки в консоли.
И скрипты так не подключаются.
Надо подключать через
$this->registerJs('/*code*/')

[Дмитрий]

Как внедрить Vue в существующий Yii-проект?

[Рустам Акимов]

Дмитрий, если регистрирую vue через registerJs, то он вообще перестает выполняться, если просто вывожу как в примере, то он заменяет значения на нужное мне, но всё равно не обновляет его, потому что теряет v-model

[Дмитрий]

если регистрирую vue через registerJs

Рустам Акимов, возможно не правильно делаете.

[Дмитрий]

example:<?= '\'' . $model->example . '\''?>
Как то не очень красиво. Так будет работать?
example: '<?= $model->example ?>'

[Moskus]

Вот что бывает, когда "зачем мне изучать JavaScript, я сразу начну учить JS-фреймворки".

[Рустам Акимов]

Moskus, сильное конечно заявление, но я не учу js фреймворк, я просто использовал его как библиотеку, зная что с его помощью можно реализовать нужный мне функционал в 6 строчек

[Moses Fender]

Рустам Акимов, Так он и не будет работать, коли подгружается. Приходит строка, её надо сделать скриптом в window и запустить. Обычно это делается как-то так:
new Function(/* code */)();

Answer 1

[DenisAlliswell]

Насколько я понял, вопрос в том, как передавать данные из php во vue.js.

Один из вариантов может быть таким:

<?php
// Передаем данные из php
$this->registerJs("
     vueModel.example = '" . $model->example . "';
     vueModel.someOtherVariable = 123;
     vueModel.someOtherObject = " . json_encode($somePhpArray) . ";
", \yii\web\View::POS_BEGIN);
?>

// Если нужно добавить еще какие-либо данные из js
var vueModel.someJsVariable = 321;

var app = new Vue({
     el: '#fonter',
     data: vueModel,
})