代码之家 › 专栏 › 技术社区 › IsraGab

动态内容到v-expansion-panel-content

vuetify.js vuejs2 promise

IsraGab · 技术社区 · 6 年前

我希望在每次单击标题时加载数据,然后将数据(加载时)显示到 v-扩展面板-内容 .

它并不总是起作用。如果用户在加载数据之前打开手风琴,一旦数据来自服务器,它将不会被更新。

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

2 回复 | 直到 6 年前

Neha Shivhare 3 年前

您可以在v-expansion-panel-content中使用“渴望”道具。并将值设置为true。

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

ZaidRehman 5 年前

我弄乱了你的小提琴,想到了这个:

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',
        );
    },
};

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