如何在我的 v-data-table Vuetify Vuex Axios API 中添加 API答案

【问题标题】：How to add API in my v-data-table Vuetify Vuex Axios API如何在我的 v-data-table Vuetify Vuex Axios API 中添加 API
【发布时间】：2019-05-06 13:39:08
【问题描述】：

我在尝试使用 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，但我无法在我的搜索方法中搜索特定数据，请帮助我

【问题讨论】：

嗨，您能否提供第二张未过滤列表的屏幕截图，以便我们看到正在呈现的数据？
i.imgur.com/a8Z6PQh.png这是我的未过滤列表，这是我的过滤列表i.imgur.com/2c5pL8C.png
哦，您使用的是items 而不是reportData.data 的报告，而且您使用的是v-for，您不需要数据表

标签： vue.js vuejs2 axios vuex vuetify.js

【解决方案1】：

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

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

每当reportdata中有新数据可用时都这样做，它会更新报告。

【讨论】：

【解决方案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>

【讨论】：