只加载一次 Vue 组件数据

Question

我正在beforeMount内通过AJAX加载组件的数据。但是，每次我折叠 vue-strap accordion 元素时，它都会清除整个内容，迫使它每次重新加载 AJAX。我尝试将 AJAX 调用包装在一个条件中，该条件检查数据之前是否已经通过执行if (this.cycles.length === 0)填充，但显然它也在折叠折叠时被清除。

这是我的父模板：

<template>
    <accordion :one-at-atime="true" type="info">
        <panel :is-open="index === 0" type="primary" :header="'Day ' + day.day" v-for="(day, index) in days" :key="day.id">
            <accordion :one-at-atime="true" type="success">
                <panel is-open type="success" header="Cycles">
                    <cycles
                            :day="day"
                    >
                    </cycles>
                </panel>
            </accordion>
        </panel>
    </accordion>
</template>
<script>
    export default {
        props: [
            'plan'
        ],
        data() {
            return {
                days: []
            }
        },
        beforeMount: function () {
            var self = this;
            if (this.days.length === 0) {
                axios.get('/plans/' + this.plan.id + '/days/data')
                    .then(function (response) {
                        self.days = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }
</script>

这是包含其周期的cycles.vue script that it loads repeatedly every time I collapse a天手风琴：

<template>
    <accordion :one-at-atime="true" type="info">
        <panel :is-open="index === 0" type="primary" :header="'Week ' + cycle.week + ': ' + cycle.name" v-for="(cycle, index) in cycles" :key="cycle.id">
            <form v-on:submit.prevent="update">
                ....misc input fields here...
            </form>
        </panel>
    </accordion>
</template>
<script>
    export default {
        props: [
            'day'
        ],
        data() {
            return {
                cycles: []
            }
        },
        beforeMount: function () {
            var self = this;
            if (this.cycles.length === 0) {
                axios.get('/plans/days/' + this.day.id + '/cycles/data')
                    .then(function (response) {
                        self.cycles = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }
</script>

如何确保每次在手风琴上发生简单的显示/隐藏时都不会重新加载数据？

Answer 1

尝试将v-once添加到 accordion：

带v-once的廉价静态组件

在 Vue 中渲染纯 HTML 元素非常快，但有时你可能有一个包含大量静态内容的组件。在在这些情况下，您可以确保仅对其进行一次评估，然后通过将 v-once 指令添加到根元素进行缓存，例如这：

Vue.component('terms-of-service', {
  template: '
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  '
})