0

我正在寻找一种通过从 v-select 中选择周期值来更新谷歌条形图显示的方法。

到目前为止，最初，我的脚本已加载，调用“async created()”并将数据从 REST API 获取到 MongoDB 调用模块，并将返回的数据存储在帖子 [] 中。然后最后将其保存到图表数据数组中。

数据格式是这样的

钥匙 类型
日期 (YYYY-MM-DD) 细绳
成功计数 整数
失败计数 整数

我想做的是，每个 v-select 值都包含 {name, id} 对。有没有办法将选定的“selectedItem.id”传递给脚本的 created(parameter) 方法或 PostService.get_dashboard_Posts(parameter) 的参数位置？不刷新整个页面？

下面是我的 CSS 代码

<template>
<v-app
:style="{ background: $vuetify.theme.themes.light.background }"
style="max-height:100vw;"
>
<v-container style="min-height:100%;">
  <v-layout row class="ma-4">
    <v-app style="background-color:grey lighten-1:" class="rounded">
      <v-row>
        <v-col cols="12" md="12" class="ligne">
          <v-container>
            <v-row>
              <v-col cols="12" md="12">                    
                <h1 class="heading mb-2 grey--text">Dashboard </h1>
                <v-card>                                        
                <template>                    
                 <p class="error" v-if="error">{{error}}</p>
                 <div class = "posts-container">
                    <div class="post"
                      v-for="(post,index) in posts"
                      v-bind:item="post"
                      v-bind:index="index"
                      v-bind:key="post._id"
                    >
                    </div>
                  </div>
                  
                  <div id="app">
                    <v-col cols="12" md="12">
                      <v-row>
                        <v-col cols="12" md="9"><h3 class="subTitle">Number Of Transactions</h3></v-col>        
                        <v-col cols="12" md="3">
                            <v-select
                                :items="comboItem"
                                v-model="selectedItem"
                                item-text="name"
                                item-value="id"
                                label="Period"
                                single-line
                                dense       
                                v-on:change=""                           
                                return-object>
                            </v-select>
                        </v-col>           
                      </v-row>      
                      <GChart
                        type="ColumnChart"
                        :data="chartData"
                        :options="chartOptions"
                      />
                    </v-col>
                  </div>
                </template>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-col>            
      </v-row>
    </v-app>
  </v-layout>
</v-container>

下面是我的脚本代码

<script>
// @ is an alias to /src
import PostService from "../PostService";
export default {
  name: "PostComponent",  
  data: () => ({
    posts:[],    
    comboItem:[
      {
        name: 'today',
        id: 1
      },
      {
        name: 'last week',
        id: 2
      },
      {
        name: 'last month',
        id: 3
      },
      {
        name: 'last year',
        id: 4
      },
    ],
    chartData: [
      ["date", "success", "failure"]
    ],
    chartOptions: {
      chart: {
        title: "Company performance",
        subtitle: "Sales,Expences,and Profit:2016-2019"
      },
      hAxis: {
        title: "date",
        textStyle: {
          fontSize:9
        }
      },
      vAxis: {
        title: "frequency",
        textStyle: {
          fontSize:15
        }
      },
      legend: { 
        position : 'top',
        alignment:'center'
      }
    }
  }),

  async created() {
    try {
      this.posts = await PostService.get_dashboard_Posts();

      for(var i=0;i<Object.keys(this.posts[0]).length;i++){        
        this.chartData.push([`${this.posts[0][i]._id.year}-${this.posts[0] 
[i]._id.month}-${this.posts[0][i]._id.day}`, this.posts[0][i]._id.success_count, this.posts[0] 
[i]._id.failure_count])
      }
    } catch (err) {
      this.error = err.message;
    }
  },
  components: {},
  computed: {
    theme() {
      return this.$vuetify.theme.dark ? "dark" : "light";
    }
  },
  methods:{
  }
};
</script>
4

1 回答 1

0

是的，这是可能的，

基本上我们需要能够响应selectedItem. 当前所有的加载都发生在创建的函数内部，我们无法再次运行，所以第 1 步是将创建的函数的主体移动或复制到一个新方法，我们可以调用它load或其他什么。现在我们可以通过调用 load 来响应更改为 selectedItem。

async created() {
    await this.load();
},
components: {},
computed: {
    theme() {
        return this.$vuetify.theme.dark ? "dark" : "light";
    }
},
methods: {
    async load() {
        try {
            this.posts = await PostService.get_dashboard_Posts();

            for (var i = 0; i < Object.keys(this.posts[0]).length; i++) {
                this.chartData.push([`${this.posts[0][i]._id.year}-${this.posts[0] 
[i]._id.month}-${this.posts[0][i]._id.day}`, this.posts[0][i]._id.success_count, this.posts[0]
                    [i]._id.failure_count
                ])
            }
        } catch (err) {
            this.error = err.message;
        }
    }
}

我们可以通过几种方式来应对变化，我将向您展示一些：

我们可以在模板中直接在输入元素上定义这种行为：

<v-select
    v-model="selectedItem"
    ...
    v-on:change="load(selectedItem.id)"                           
    ...
    >
</v-select>

告诉 vue 响应更改的另一种方法是使用观察者：

...
async created() {
    await this.load();
},
watch: {
   selectedItem(newValue) {
       this.load(newValue.id);

       // At the moment the watcher runs this.selectedItem is already 
       // the newValue (this.selectedItem === newValue) so we could also
       // do this:
       this.load(this.selectedItem.id);
   }
},
components: {},
...

我没有涉及并留给您的最后一件事是将 selectedItem.id 提供给 PostService.get_dashboard_Posts

于 2021-01-08T08:51:05.880 回答