v-data-table Vuetify Vuex Axios API에서 API를 추가하는 방법

v-data-table Vuetify Vuex Axios API에서 API를 추가하는 방법

v-data-table을 사용하여 API 데이터 테이블을 검색할 때 문제가 발생했습니다. 코드는 다음과 같습니다. 보고서 상태를 할당하고 싶지만 이 어레이를 추가하는 방법과 검색 테이블을 수정하는 방법입니다.

  <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를 가져올 수 있지만 제 검색 방법에서 특정 데이터를 검색할 수 없습니다. 도와주세요.

제 생각엔 여기서.watch좋은 선택일 것입니다.

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

보고서 데이터에 새 데이터를 사용할 수 있을 때마다 이 작업을 수행하면 보고서가 업데이트됩니다.

이 해결책을 시도해 주시겠습니까, 제가 제거했습니다.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>

언급URL : https://stackoverflow.com/questions/56006422/how-to-add-api-in-my-v-data-table-vuetify-vuex-axios-api