如何在我的V-DATA-table Vuetify Vuex Axios API中添加API

Question

我在尝试使用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.stack.imgur.com/nbw3i.png这是我的错误示例，这是我的未过滤示例https://i.stack.imgur.com/gi5fu.png我的表可以抓住该API，但我无法在搜索方法上搜索特定数据，请帮助我

Answer 1

我认为这里watch是不错的选择。

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

每次在ReportData中可用的新数据时，都会更新报告。

Answer 2

您可以尝试此解决方案，我完全删除了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>