Question

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

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

Answer 1

如果要使用REST调用外部API，则需要使用mp_msg_level_all，它是一个NPM软件包，可用于进行GET，POST和所有此类操作。

在我们的示例中使用此online working API。首先，您需要通过调用此API来获取数据。互联网上的优秀教程将向您展示更多详细信息，但是让我们使用此代码。

axios

然后，您只需要像the documentation中那样使用数据表。这是一个CodePen，可以帮助您简要了解如何进行API调用然后显示它。这些全部来自官方文档，只需对其进行修改即可调用REST API。我还将代码放在这里，以便也将其保存给以后的读者。

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

然后是关联的JS。

<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>

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

1 个答案: