BX.Vue - IlyaKovanov/lib GitHub Wiki

CModule::IncludeModule("iblock");
// $arrData = \Tables\CatalogTable::getList()->fetchAll();
$arSelect = Array("ID", "NAME", "PREVIEW_TEXT");
$arFilter = Array("IBLOCK_ID"=>IntVal(4), "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y");
$res = CIBlockElement::GetList(Array(), $arFilter, false, Array("nPageSize"=>50), $arSelect);
while($ob = $res->GetNextElement())
{
	$arFields[] = $ob->GetFields();
	// print_r($arFields);
}

$arResult['DATA'] = $arFields;

$arrHeaders = [
                ['name' => 'Название'],
                ['name' => 'Описание'],
];

$arResult['HEADERS'] = $arrHeaders;

$this->IncludeComponentTemplate();

Bitrix\Main\UI\Extension::load("ui.vue");
define('VUEJS_DEBUG', true);

$arrItems = $arResult['DATA'];


?>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <div id="app">
        test 12345
    </div>

    <script type="text/javascript">

        BX.Vue.create({

            el: '#app',

            data: {
                items: <?=json_encode($arResult['DATA'])?>,
                headers: <?=json_encode($arResult['HEADERS'])?>,
            },

            template:   `
                        <table class="table table-striped" id="checkLists">

                            <thead>
                                    <tr>
                                        <th scope="col" v-for="(item, index) in headers">
                                            <strong>{{ item.name }}</strong>
                                        </th>
                                    </tr>
                            </thead>

                            <tbody>
                                   <tr v-for="(item, index) in items">
                                        <td>
                                            {{ item.ID }}
                                        </td>
                                        <td>
                                            {{ item.NAME }}
                                        </td>
                                   </tr>
                            </tbody>

                        </table>
                        `
        });

    </script>