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

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

仅加载一次

1 个答案:

`v-once`