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

Posted 2023-02-22

【中文标题】如何在 Vuetify 数据表中连接外部数据

【英文标题】：How to wire up external data in Vuetify datatables

【发布时间】：2018-08-10 00:25:18

【问题描述】：

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

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

【参考方案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->
          <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()
    
  
)