Как визуализировать данные компонента после загрузки страницы при клике - PullRequest
Новая
       5

Как визуализировать данные компонента после загрузки страницы при клике

0 голосов
/ 06 июля 2019

Я использую Vue JS с Laravel.Я хочу перезагрузить мои данные в соответствии с датой при клике.

Мои данные из API получаются в соответствии с датой, но впереди они не меняются

Здесь под моим app.jsкод 

var socket = new Vue({
  el: "#enrollment-app",
  components: {
    barChart
  },
  data: {
    privateChannleData: null,
    exam_type: null,
    exam_id: null,
    response_exam_data: [],
    response_lap_data: [],
    response_btn_list: [],
    student_list: [],
    lineChartData: {
      lables: [],
      options: [],
      dataset: []
    }
  },
  created() {

    if (document.getElementById("exam_type"))
      this.exam_type = document.getElementById("exam_type").value;

    if (document.getElementById("exam_id"))
      this.exam_id = document.getElementById("exam_id").value;

    if (this.exam_type != null && this.exam_id != null)
      this.getEnrollmentStatus();
  },
  methods: {

    getEnrollmentStatus: function(date="null") {
      var self = this;
      var data_set = [];
      var params = {
        exam_type: document.getElementById("exam_type").value,
        exam_id: document.getElementById("exam_id").value,
        date:date,
      };

      console.log(params);
      axios
        .post("/api/get_enrollment_data", params)
        .then(function(response) {
          self.response_exam_data = response.data.data;
          //console.log(self.response_exam_data.students[0]);
          self.response_exam_data.students[0].forEach(function(ii, vv) {
            self.student_list.push(ii);
          });

            self.response_btn_list=self.response_exam_data.articles[0];   
          self.lineChartData.dataset = {
            labels: [
              "Total Enrollment",
              "Not Submitted",
              "Submitted",
              "Total Pass",
              "Total Fail"
            ],
            datasets: [
              {
                label: "Enrollment Data",
                backgroundColor: "#f87979",
                data: [
                  parseInt(self.response_exam_data.total_enrollment),
                  parseInt(self.response_exam_data.not_submitted),
                  parseInt(self.response_exam_data.submitted_count),
                  parseInt(self.response_exam_data.total_pass),
                  parseInt(self.response_exam_data.total_fail)
                ]
              }
            ]
          };
          self.lineChartData.options = {
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true
                  }
                }
              ]
            },
            responsive: true,
            maintainAspectRatio: true
          };
        })
        .catch(function(error) {
          alert("Error. Try again after sometime.");
        });
    }
  },

});

Вот мой HTML-код. 

<div id="enrollment-app">
    <button v-for="(button, key)  in response_btn_list" type="button" v-on:click="getEnrollmentStatus({{ button }})" class="btn btn-success btn-icon left-icon  mr-10" :date="button">lap @{{ key+1 }} </button>
    <div class="user-data">
        <span class="name block capitalize-font">@{{student.name}}</span>
        <span class="time block" style="width:400px;">                                                                                    Status:- <span class="txt-primary">@{{student.status_text}} </span> Rank:- <span class="txt-primary">@{{student.My_rank}}</span> Time Taken:- <span class="txt-primary">@{{student.timeTaken}}</span><br/>
          Result:- <span class="txt-primary">@{{student.final_result}}</span>
          Total Marks:- <span class="txt-primary">@{{student.total_marks}}</span>
          Obtained Marks:- <span class="txt-primary">@{{student.obtained_marks}}</span>
        </span>
        <div :class="student.status"></div>
        <div class="clearfix"></div>
    </div>
</div>

Мои результирующие данные при загрузке страницы

изображение в загруженных данных

Мои результирующие данные после нажатия кнопки

данные после нажатия кнопки

Я хочу отображать данные только в переднем конце ..

...