我正在尝试使用组件渲染卡片并将 JSON 作为 Prop 传递，对象包含一个名为“apps”的键，其中包含需要以卡片形式呈现的应用程序。在 Prop 的帮助下，我正在填充卡片并在屏幕上渲染卡片。
卡片正在屏幕中呈现。但是它被渲染了两次。
我不知何故发现 computed function 被调用了两次。
然后依次渲染组件两次。
我实际上是 bootstrap-vue 以使其响应和计算函数实际上是创建一个 2D 数组以将其呈现为 3 行。
我无法理解如何解决这个问题。 我是 Vue 的新手，被困在这里。
这是组件代码:
CardRenderer.vue:
<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</pre>
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script lang="js">
export default {
name: 'CardRenderer',
props: {
passer: Object
},
mounted() {
},
data() {
return {
}
},
methods: {
},
computed: {
rows() {
const itemsPerRow = 3
let rows = []
let arr = this.passer.apps
// eslint-disable-next-line
// console.log(rows)
for (let i = 0; i<arr.length; i+=itemsPerRow){
let row = []
for (let z = 0; z<itemsPerRow; z++) {
row.push(arr[z])
}
rows.push(row)
}
// eslint-disable-next-line
console.log(rows)
return rows
}
}
}
</script>
<style scoped>
</style>
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>
这就是它现在被渲染的方式!
我只想让它渲染一次卡片。不是两次 我应该怎么做才能使计算函数只被调用一次。
谢谢
最佳答案
我怀疑您能否从计算属性中推送到计算属性；实际上，我根本不明白为什么您需要计算，因为没有任何变化，因此您需要重新计算(计算)它。
您可以尝试这种方法:将您的计算移动到您在生命周期中调用的方法中，例如安装。当然，你还需要将行初始化为一个空数组，并将你的方法推送到this.rows。
关于javascript - 计算函数在 VueJS 中被调用两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56531588/