How to pass models to js file?

Question

Yii

In the controller we take models:

public function actionIndex()
    {
        $searchModel = new BookSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        return $this->render($this->getIndexByRole(), [
            'searchModel' => $searchModel,
            'models' => $dataProvider->getModels(),
        ]);
    }

Then we try to display :

$script = <<< SCRIPT
var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: '$models'
    }
});
console.log($models);
SCRIPT;
$this->registerJs($script);

<div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.id }}
            </li>
        </ol>
    </div>

But nothing comes out

Answer 1

return $this->asJson(ArrayHelper::map($models,'id',function($model){
            return $model->attributes('id');
        }));