VueJS中

Question

我正在尝试使用组件渲染卡并将JSON作为props传递，并且Object包含一个名为“ apps”的密钥，该密钥包含需要以卡形式呈现的应用程序。在道具的帮助下，我正在填充卡片并在屏幕上渲染卡片。

卡片正在屏幕上呈现。但是它被渲染了两次。 我以某种方式发现computed function被两次调用了。

，然后两次渲染组件。

我实际上是引导者使其响应，而计算函数实际上是在创建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>

这就是现在正在渲染的方式！

我只希望它一次渲染卡。不两次 我该怎么做才能使计算函数被调用一次。

谢谢

Answer 1

我怀疑您是否可以从计算属性中推送到计算属性；实际上，我根本不明白为什么需要计算，因为没有任何变化，因此您需要重新计算（计算）。

您可以尝试这种方法：将计算结果移动到在生命周期（如mount）中调用的方法。当然，您还需要将行初始化为一个空数组，并将您的方法推送到this.rows。