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

Question

我想在每次单击标题时加载数据，然后将数据(加载时)显示到 v-expansion-panel-content 中。

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

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

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

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