Я пытаюсь визуализировать карту, используя компонент и передавая JSON в качестве реквизита, и объект содержит ключ с именем 'apps', который содержит приложения, которые должны быть отображены в виде карт. и с помощью реквизита я заполняю карты и отображаю их на экране.
Карты отображаются на экране. Но это делается дважды.
Я как-то понял, что computed function вызывается дважды.
и по очереди рендеринг компонентов дважды.
Я на самом деле загрузчик, чтобы сделать его отзывчивым, а вычисляемая функция фактически создает двумерный массив, чтобы отобразить его в строке 3.
Я не могу понять, как мне решить эту проблему.
Я новичок в Vue и застрял здесь.
Вот код компонента:
CardRenderer.vue:
<code><template lang="html">
<div>
<b-container class="bv-example-row">
<b-row v-for="row in rows">
<b-col v-for="item in row" >
<!-- you card -->
<b-card
title="this.item.title"
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
<h1>item data:</h1>
<pre>Something
</ Б-карта-текст>
пойти куда-нибудь </ b-button>
</ Б-карта>
</ Б-Col>
</ Б-строка>
</ Б-контейнер>
экспорт по умолчанию {
название: 'CardRenderer',
реквизит: {
passer: объект
},
mount () {
},
данные() {
вернуть {
}
},
методы: {
},
вычислено: {
row () {
const itemsPerRow = 3
пусть строки = []
let arr = this.passer.apps
// eslint-disable-next-line
// console.log (строки)
for (пусть i = 0; i
<стиль ограничен>
CardGrouper.vue
<template lang="html">
<div class = "full" >
<div class="h-50" style=" background-color: #C8544F">
<h1 align="center">{{this.passingObject.title}} </h1>
<CardRenderer v-bind:passer="passingObject"/>
</div>
</div>
</template>
<script>
import CardRenderer from "./CardRenderer.vue"
/* eslint-disable */
export default {
name: 'CardGrouper',
components: {
CardRenderer
},
props: [],
mounted() {
},
data() {
return {
passingObject: {
"name": "Abhigyan Nayak",
"email": "abhigyan.nayak@gmail.com",
"city_id": 21,
"user_type": ["ASV"],
"group_id": 10,
"user_id": 1,
"title": "MeshApp",
"apps": [
{
"name": "Donut",
"link": "http://www.makeadiff.in/apps/donut",
"icon": "http://www.makeadiff.in/icon1",
"description": "some lorum epsum text",
"apps": []
},
{
"name": "tunod",
"link": "http://www.makeadiff.in/apps/tunod",
"icon": "http://www.makeadiff.in/icon2",
"description": "some lorum epsum text",
"apps": []
},
{
"name": "finance",
"link": "http://www.makeadiff.in/apps/finance",
"icon": "http://www.makeadiff.in/icon3",
"description": "some lorum epsum text",
"apps": [
{
"name": "reimbursement",
"link": "http://www.makeadiff.in/apps/tunod",
"icon": "http://www.makeadiff.in/icon2",
"description": "some lorum epsum text",
"title": "finance",
"apps": []
},
{
"name": "Salesforce",
"link": "http://www.makeadiff.in/apps/tunod",
"icon": "http://www.makeadiff.in/icon2",
"description": "some lorum epsum text",
"title": "finance",
"apps": []
}
]
}
]
}
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped >
.full{
width: 100vw;
height: 90vh;
background: linear-gradient(to bottom, Red 30%, white 50%);
}
</style>
Вот как это делается сейчас!
Я просто хочу, чтобы он вытащил карту один раз. не дважды
Что я должен сделать, чтобы вычисляемая функция вызывалась один раз.
Спасибо