只加载一次 Vue 组件数据

Question

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

这是我的父模板：

<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 aday` 手风琴：

<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

尝试adding 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>\
  '
})