Артем Прохоров

#sidebar {
    width: 25%;
    height: 100%;
    background-color: #5b1616;
    overflow: auto;
}

#content {
    width: 75%;
    height: 100%;
    background-color: black;
    overflow: auto;
}

Почему ref не реактивно в html теге?

Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.

key не принимает значение переменных

const arr = [];

const key = "xxx";
const value = "yyy";

// подробно:
const item = {};
item[key] = value; 

// или покороче:
const item = {[key]: value};

// в массив
arr.push(item);
arr // [{xxx: "yyy"} ]

const lsKey = "mytable";

// Сохранить в LS:
localStorage.setItem(lsKey, JSON.stringify(arr));

// Получить из LS:
const arr = JSON.parse(localStorage.getItem(lsKey)) || [];

state.table = {}; // не квадратные, а фигурные

state.table[url] = value;

const arr = [];     // массив! Но «в JS всё — объект»
arr.X = "Y";        // можем себе позволить!
console.log(arr.X); // "Y" ура-а, хакнули JavaScript!

JSON.stringify(arr) // [] - пустой массив, облом.

public function actions()
    {
        return [
            'index' => [
                'class' => 'yii\rest\IndexAction',
                'modelClass' => $this->modelClass,
                'checkAccess' => [$this, 'checkAccess'],
            ],
            'view' => [
                'class' => 'yii\rest\ViewAction',
                'modelClass' => $this->modelClass,
                'checkAccess' => [$this, 'checkAccess'],
            ],
            'create' => [
                'class' => 'yii\rest\CreateAction',
                'modelClass' => $this->modelClass,
                'checkAccess' => [$this, 'checkAccess'],
                'scenario' => $this->createScenario,
            ],
            'update' => [
                'class' => 'yii\rest\UpdateAction',
                'modelClass' => $this->modelClass,
                'checkAccess' => [$this, 'checkAccess'],
                'scenario' => $this->updateScenario,
            ],
            'delete' => [
                'class' => 'yii\rest\DeleteAction',
                'modelClass' => $this->modelClass,
                'checkAccess' => [$this, 'checkAccess'],
            ],
            'options' => [
                'class' => 'yii\rest\OptionsAction',
            ],
        ];
    }

'dataFilter' => [
                    'class' => 'yii\data\ActiveDataFilter',
                    'searchModel' => 'path/To/Search,
                ],

$searchModel = new \app\models\SearchModel();    
return $searchModel->search(\Yii::$app->request->queryParams);

public function actions()
        {
            $actions = parent::actions();
            $actions['index']['prepareDataProvider'] = [$this, 'prepareDataProvider'];

            return $actions;
        }

public function prepareDataProvider()
        {
            $searchModel = new \app\models\SearchModel();
            $dataProvider = $searchModel->search(\Yii::$app->request->queryParams);
            return $dataProvider;
        }

vue-router использует path-to-regexp в качестве движка для проверки совпадения маршрутов, что позволяет задействовать многие продвинутые возможности...