如何在 Vuetify 数据表中连接外部数据

Question

我刚开始使用 Vue 并发现了 Vuetify（并且印象非常深刻）。我也是 node.js 的新手，但有一些经验。

我正在尝试找到一些将数据从外部 API 加载到 vuetify 数据网格中的示例 - CRUD 类型的东西，相当大量的数据分页。 Vuetify 中的文档在这方面有点欠缺。我应该使用 Vuex 吗？

Answer 1

如果您想使用 REST 调用外部 API，则需要使用 axios，这是一个 NPM 包，允许您进行 GET、POST 和所有此类操作。

我们以online working API 为例。首先，您需要通过调用此 API 来获取数据。网上有一个很好的教程会告诉你更多细节，但是让我们使用这段代码。

this.todos = axios.get('https://jsonplaceholder.typicode.com/todos/')
  .then(response => { this.todos = response.data })
  .catch(error => { console.log(error)});

那么你只需要像the documentation那样使用数据表。这是一个CodePen，可以帮助您简要了解我是如何进行 API 调用并显示它的。这一切都来自官方文档，只是修改为调用 REST API。我将代码也放在这里，以便为将来的读者保存它。

<div id="app">
  <v-app id="inspire">
    <div>
      <v-toolbar flat color="white">
        <v-toolbar-title>Todos CRUD</v-toolbar-title>
        <v-divider
          class="mx-2"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.userId" label="User ID"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.id" label="ID"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-text-field v-model="editedItem.title" label="Title"></v-text-field>
                  </v-flex>
                  <v-flex xs12 sm6 md4>
                    <v-checkbox v-model="editedItem.completed" label="Completed?"></v-checkbox> 
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
              <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
      <v-data-table
        :headers="headers"
        :items="todos"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-right">{{ props.item.userId }}</td>
          <td class="text-xs-right">{{ props.item.id }}</td>
          <td class="text-xs-right">{{ props.item.title }}</td>
          <td class="text-xs-right">{{ props.item.completed }}</td>
          <td class="justify-center layout px-0">
            <v-icon
              small
              class="mr-2"
              @click="editItem(props.item)"
            >
              edit
            </v-icon>
            <v-icon
              small
              @click="deleteItem(props.item)"
            >
              delete
            </v-icon>
          </td>
        </template>
        <template slot="no-data">
          <v-btn color="primary" @click="initialize">Reset</v-btn>
        </template>
      </v-data-table>
    </div>
  </v-app>
</div>

然后是关联的JS。

new Vue({
  el: '#app',
  data: () => ({
    dialog: false,
    headers: [
      {
        text: 'User ID',
        align: 'left',
        sortable: false,
        value: 'userId',
        width: '10'
      },
      { text: 'ID', value: 'id', width: '10' },
      { text: 'Title', value: 'title' },
      { text: 'Completed', value: 'completed' }
    ],
    todos: [],
    editedIndex: -1,
    editedItem: {
      userId: 0,
      id: 0,
      title: '',
      completed: false
    },
    defaultItem: {
      userId: 0,
      id: 0,
      title: '',
      completed: false
    }
  }),

  computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
    }
  },

  watch: {
    dialog (val) {
      val || this.close()
    }
  },

  created () {
    this.initialize()
  },

  methods: {
    initialize () {
      this.todos = axios.get('https://jsonplaceholder.typicode.com/todos/')
      .then(response => { this.todos = response.data })
      .catch(error => { console.log(error)});
    },

    editItem (item) {
      this.editedIndex = this.todos.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem (item) {
      const index = this.todos.indexOf(item)
      confirm('Are you sure you want to delete this item?') && this.todos.splice(index, 1)
    },

    close () {
      this.dialog = false
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      }, 300)
    },

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.todos[this.editedIndex], this.editedItem)
      } else {
        this.todos.push(this.editedItem)
      }
      this.close()
    }
  }
})