Question

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

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

SELECT a.* 
  FROM
     ( SELECT x.*
            , CASE WHEN @prev=teamid THEN CASE WHEN result = 'H' THEN @i:=@i+1 ELSE @i:=0 END ELSE @i:=0 END i
            , @prev:=teamid prev 
         FROM my_table x
            , (SELECT @prev:=null,@i:=0) vars 
        ORDER 
           BY teamid
            , date
     ) a
  JOIN 
     ( SELECT teamid
            , MAX(date) date 
         FROM my_table 
        GROUP  
           BY teamid
     ) b 
    ON b.teamid = a.teamid 
   AND b.date = a.date;
+--------+--------+------------+------+------+
| TeamID | Result | Date       | i    | prev |
+--------+--------+------------+------+------+
|     25 | H      | 2018-01-20 |    1 |   25 |
|     28 | H      | 2018-01-20 |    2 |   28 |
|     58 | D      | 2018-01-20 |    0 |   58 |
|     61 | H      | 2018-01-14 |    2 |   61 |
+--------+--------+------------+------+------+

Fddle

Answer 1

我和你的小提琴搞砸了，想出了这个：

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。不确定这是否是最好的方式，但似乎是一个快速的解决方案。

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

1 个答案: