Tạo layout list cho cars - Hướng dẫn xây dựng một view cho frontend website adayroi.online

Tại thư mục

apps/ecommerce/views/cars/tmpl/desktop (Nhớ tạo các folder nếu chưa có nhé)

tạo file list.bhs

Nội dung file

<div class="view-cars-list">

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Year</th>
                <th>note</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(car,index_car) in cars">
                <td>\car.name</td>
                <td>\car.year</td>
                <td>\car.note</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    jQuery(document).ready(function ($) {

        let view_cars_list = new Vue({
            el: '.view-cars-list',
            props: {},
            components: {
                'modal': {
                    template: `
              <div class="modal-content">
                <div class="modal-header">
                    <slot name="title"></slot>
                </div>
                <div class="modal-body">
                <slot name="body"></slot>
                </div>
                <div class="modal-footer">
                    <slot name="item1"></slot>
                    <slot name="item2"></slot>
                    <slot name="Close"></slot>
                </div>
              </div>
        `
                },
            },
            beforeMount() {

            },
            mounted() {
                this.init();

            },
            data: {
                cars:[
                    {
                        name:"honda",
                        year:2018,
                        note:"xe honda",
                    }
                ]
            },
            computed: {},
            methods: {
                init: function () {
                    //this.GetApiCars();
                },
                temp_func: function () {

                },
                GetApiCars:function (){
                    let CurrentThis=this;
                    $.ajax({
                        type: "GET",
                        url: `${root_url_api}/cars`,
                        data: {

                        },
                        success: function (response) {
                            var response = $.parseJSON(response);
                            if (response.result === "success") {
                                CurrentThis.cars=response.data;
                            } else {

                                //somthing to do
                            }

                        },
                        error: function (request, status, error) {

                        }
                    });
                }

            }


        });
    });


</script>

Ở đây các bạn thấy có sử dụng vujs, hệ thống đã  tích hợp vujs lên rồi, các bạn chỉ việc sử dụng thôi. nếu ai chưa tìm hiểu vujs thì lên google tìm kiếm nhé

Ở trong code có phần ajax, các bạn sẽ cần phải định nghĩa các api, hãy xem kỹ phần xây dựng api phía server nhé