Блог

Я относительно новичок с vue.js и я пытаюсь привязать объекты из локального массива к загрузочной карте. Цель состоит в том, чтобы использовать свойства объекта в загрузочной карте. В моем случае индексом объекта rigth из массива объектов является координата x и y из таблицы. Итак, у меня есть ширина и высота, которые генерируют таблицу, и после них каждая из этих ячеек становится объектом из массива объектов, а индекс по-прежнему представляет собой комбинацию текущей ширины и высоты.

Мой Код:

 <template>
    <div class="content">
        <h1 class="p-4">Table Overview</h1>

        <div class="cards-list" v-for="row in height">

            <div class="card" v-for="col in width" v-bind='boxes[(col "" row)]'>
                <div class="card_image">

                </div>
                <div class="card_title title-white">
                    <p>#Box {{col "" row}}</p>
                </div>
            </div>

        </div>

    </div>

</template>

<script>

import Api from "../../src/api";

export default {
    name: "TableOverview",
    data() {
        return {
            height: 8,
            width: 12,
            boxes: [],
            settings: [],
        }
    },
    mounted() {
        Api.get('/table-settings').then(response => {
            this.settings = response.data
            this.height = parseInt(this.settings['height'].value);
            this.width = parseInt(this.settings['width'].value);
        });

        Api.get('/boxes').then(respones => {
            this.boxes = respones.data
        });
    }
}
</script>
 

Объект-Коробка обладает следующими свойствами:

 "12": {
    "id": 2,
    "number": "12",
    "pos_height": 1,
    "pos_width": 2,
    "prio": 100
}
 

Индекс «12» представляет собой комбинацию между «pos_height» и «pos_width».

Моя цель состоит в том, чтобы зациклить все коробки и в том, чтобы каждая коробка находилась в нужном положении, и я могу использовать свойства каждой коробки/объекта в загрузочной карте.

Кто-нибудь может мне помочь?