如何在我的v数据表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.imgur.com/2c5pL8C.png这是我的错误示​​例，这是我未过滤的示例https://i.imgur.com/a8Z6PQh.png 我的桌子可以使用该API，但是我无法通过搜索方法搜索特定数据，请帮助我

Answer 1

我认为在这里 .display { margin-bottom: 2rem; margin-top: 0; background-color: #e9ecef; padding-right: 0; padding-left: 0; border-radius: 0; width: 100vw; height: 50vh; } /*CSS Used for Navbar for Modeling Purposes*/ body { margin: 0; padding: 0; font-family: sans-serif; } nav { width: 100%; background-color: #00316b; color: #fff; text-decoration: none; overflow: auto; } ul { width: 80%; margin: 0 auto; padding: 0; } ul li { list-style: none; display: inline-block; padding: 20px; font-weight: bold; transition: 0.5s; } ul li:hover { /*background-color: #e91e63;*/ background-color: white; color: #000; border-radius: 15px; } h3 { float: left; position:relative; margin: 0 0 20px 10px; } .menu { float: right; } .toggle { width: 100%; padding: 10px; background-color: #00316b; text-align: right; box-sizing: border-box; font-size: 30px; display: none; } @media (max-width:768px){ .toggle { display: block; } ul { width: 100%; display: none; transition: 1.0s; } ul li { display: block; text-align: center; } .active { display: block; } } 是个不错的选择。

watch

每次在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>