v-expansion-panel-content에 대한 동적 콘텐츠

v-expansion-panel-content에 대한 동적 콘텐츠

헤더를 클릭할 때마다 데이터를 로드한 다음 데이터를 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');



    }
};

후들

v-syslog-panel-content에서 'syslog' 프로펠러를 사용하여 값을 true로 설정할 수 있습니다.

예<v-expansion-panel-content eager ></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 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으로 설정합니다.그것이 최선의 방법인지는 모르겠지만 빠른 해결책인 것 같다.

언급URL : https://stackoverflow.com/questions/48424301/dynamic-content-to-v-expansion-panel-content