动态内容 v-expansion-panel-content

Question

我想在每次单击 header 时加载数据，然后将数据（加载时）显示到 v-expansion-panel-content 中。

它并不总是有效。 如果用户在加载数据之前打开手风琴，一旦数据来自服务器，它就不会更新。

let Projects = {
    template: `<v-expansion-panel >
      <v-expansion-panel-content ripple v-for="project in filteredProjects " 
      :key="project.id" lazy><div slot="header"
      @click="loadSpaces(project)">{{project.name}}</div>
      <v-card>
      <v-card-text class="grey lighten-3" >
            <v-btn flat block
            v-for="space in spaces" :key="space.id"
            @click="loadLayout(project)">{{space.id}}</v-btn>
          </v-card-text>
       </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>`,
    components: {
        Spaces
    },
    props: {
        searchFilter: String
    },
    data: () => ({
        data: uniBuilderProjects.state,
    }),
    computed: {
        filteredProjects: function () {
            var self = this;
            return self.data.projects.filter(function (project) {
                return project.name.toUpperCase().indexOf(self.searchFilter.toUpperCase()) !== -1;
            })
        },
        spaces: function () {
            return this.data.spaces;
            }
    },
    methods: {
        loadSpaces: function(project){
          uniBuilderProjects.loadSpaces(project.id);
        }
    },
    mounted: function () {
        // Load Projects
        uniBuilderProjects.loadProjects();

        this.$devices = this.$resource('https://jsonplaceholder.typicode.com/posts{/id}/comments');



    }
};

Fddle

Answer 1

我搞砸了你的 fiddle 并想出了这个：

let Projects = {
    template: `<v-expansion-panel >
      <v-expansion-panel-content ripple v-for="project in filteredProjects "
      :key="project.id" lazy><div slot="header"
      @click="loadSpaces(project)">{{project.name}}</div>
      <v-card>
      <v-card-text v-if="loading == true" class="grey lighten-3" >
            <v-btn flat block
            v-for="space in spaces" :key="space.id"
            @click="loadLayout(project)">{{space.id}}</v-btn>
          </v-card-text>
       </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>`,
    components: {
        Spaces,
    },
    props: {
        searchFilter: String,
    },
    data: () => ({
        data: uniBuilderProjects.state,
        loading: false,
    }),
    computed: {
        filteredProjects: function() {
            var self = this;
            return self.data.projects.filter(function(project) {
                return (
                    project.name
                        .toUpperCase()
                        .indexOf(self.searchFilter.toUpperCase()) !== -1
                );
            });
        },
        spaces: function() {
            return this.data.spaces;
        },
    },
    methods: {
        loadSpaces: function(project) {
            this.loading = false;
            console.log(this.loading);
            uniBuilderProjects.loadSpaces(project.id);
            this.loading = true;
        },
    },
    mounted: function() {
        // Load Projects
        uniBuilderProjects.loadProjects();

        this.$devices = this.$resource(
            'https://jsonplaceholder.typicode.com/posts{/id}/comments',
        );
    },
};

所以我使用了条件渲染，每当函数完成时将 this.loading 设置为 true 和 boom。不确定这是否是最好的方法，但似乎是一个快速的解决方案。

Answer 2

您可以在 v-expansion-panel-content 中使用 'eager' 属性。 并设置值为真。

例如<v-expansion-panel-content eager ></v-expansion-panel-content>