How to add API in my v-data-table Vuetify Vuex Axios API

Question

I have a problem when trying to search my API data table using v-data-table here's my code, I want to assign my reports state but how to add this array, and how I can fix my search 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.sstatic.net/nBW3i.png here's my error example and this my unfiltered example https://i.sstatic.net/gi5fu.png my table can grab that API but i can't search specific data on my search method please help me

hi, could you provide a second screenshot of an unfiltered list, so that we can see the data being rendered ? — Dirk
– Dirk, Commented May 6, 2019 at 14:25
i.imgur.com/a8Z6PQh.png this is my unfiltered list and this my filtered list i.imgur.com/2c5pL8C.png — Fachrizal Rifahdi
– Fachrizal Rifahdi, Commented May 6, 2019 at 14:34
oh, you are using reports as you items instead of reportData.data, also you are using a v-for you dont need that with datatables — Dirk
– Dirk, Commented May 6, 2019 at 16:04

Shubham Patwa · Accepted Answer · 2019-05-06 15:49:17Z

1

I think here watch would be good option.

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

By doing this every time whenever new data is available in reportdata it will update reports.

answered May 6, 2019 at 15:49

Shubham Patwa

3342 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dirk · Accepted Answer · 2019-05-06 16:06:59Z

could you try this solution please, i removed reports completly and replaced :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>

Collectives™ on Stack Overflow

How to add API in my v-data-table Vuetify Vuex Axios API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related