Как добавить API в мою v-data-таблицу Vuetify Vuex Axios API - PullRequest
Новая
       24

Как добавить API в мою v-data-таблицу Vuetify Vuex Axios API

0 голосов
/ 06 мая 2019

У меня проблема при поиске в моей таблице данных API с использованием v-data-table вот мой код, я хочу назначить свое состояние отчетов, но как добавить этот массив и как я могу исправить свою таблицу поиска 

  <div class="ReportsTable">
    <div class="my-3 mx-1">
      <v-card>
        <v-card flat color="secondary" dark>
          <v-card-title>
            <span>Reports</span>
            <v-spacer></v-spacer>
            <v-text-field
              v-model="search"
              append-icon="search"
              label="Search"
              single-line
              hide-details
            ></v-text-field>
          </v-card-title>
        </v-card>
        <v-data-table
          v-for="report in reportsData.data"
          :key="report.id"
          :headers="headers"
          :items="reports"
          :search="search"
        >
          <template v-slot:items="props">
            <td>{{ report.user.email }}</td>
            <td>{{ report.issues }}</td>
            <td>{{ report.information }}</td>
            <td>{{ report.created_at }}</td>
          </template>
          <template v-slot:no-results>
            <v-alert
              :value="true"
              color="error"
              icon="warning"
            >Your search for "{{ search }}" found no results.</v-alert>
          </template>
        </v-data-table>
      </v-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      search: "",
      headers: [
        { text: "Email", value: "email" },
        { text: "Issues", value: "issues" },
        { text: "Information", value: "information" },
        { text: "created_at", value: "created_at" }
      ],
      reports: [
        { email: null, issues: null, information: null, created_at: null }
      ]
    };
  },
  mounted() {
    this.$store.dispatch("loadReportsData");
  },
  computed: mapState(["reportsData"])
};
</script>

<style lang="scss">
</style>

https://i.imgur.com/2c5pL8C.png вот мой пример ошибки, а это мой нефильтрованный пример https://i.imgur.com/a8Z6PQh.png моя таблица может получить этот API, но я не могу найти конкретные данные в моем методе поиска, пожалуйста, помогите мне

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

не могли бы вы попробовать это решение, пожалуйста, я удалил reports полностью и заменил :items='reportData.data'

<div class="ReportsTable">
    <div class="my-3 mx-1">
      <v-card>
        <v-card flat color="secondary" dark>
          <v-card-title>
            <span>Reports</span>
            <v-spacer></v-spacer>
            <v-text-field
              v-model="search"
              append-icon="search"
              label="Search"
              single-line
              hide-details
            ></v-text-field>
          </v-card-title>
        </v-card>
        <v-data-table
          :headers="headers"
          :items="reportsData.data"
          :search="search"
        >
          <template v-slot:items="props">
            <td>{{ report.user.email }}</td>
            <td>{{ report.issues }}</td>
            <td>{{ report.information }}</td>
            <td>{{ report.created_at }}</td>
          </template>
          <template v-slot:no-results>
            <v-alert
              :value="true"
              color="error"
              icon="warning"
            >Your search for "{{ search }}" found no results.</v-alert>
          </template>
        </v-data-table>
      </v-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      search: "",
      headers: [
        { text: "Email", value: "email" },
        { text: "Issues", value: "issues" },
        { text: "Information", value: "information" },
        { text: "created_at", value: "created_at" }
      ],
    };
  },
  mounted() {
    this.$store.dispatch("loadReportsData");
  },
  computed: mapState(["reportsData"])
};
</script>

<style lang="scss">
</style>
0 голосов
/ 06 мая 2019

Я думаю, здесь watch будет хорошим вариантом. 

watch: {
 'reportsData': {
   handler: (val) => {
     if (val) {
       this.reports = val
     }
   },
   deep: true
 }
}

Делая это каждый раз, когда в отчетных данных появляются новые данные, он обновляет отчеты.

...