为什么 Vuetify 数据表没有正确更新？答案

【问题标题】：Why is Vuetify Data table not updating correctly?为什么 Vuetify 数据表没有正确更新？
【发布时间】：2019-03-07 21:15:45
【问题描述】：

所以我正在使用通过 API 获取的项目填充数据表，它工作正常，但如果我想编辑任何字段，它就不太正常了。

仅当我手动执行搜索或排序等操作时，该项目才会更新。（数据表内）

我要修改的字段是 item.tuning 和 item.url 通过 getTab()

<v-data-table 
class="tableElem"
:headers="headers"
:items="playlist"
:loading="loadingPlaylist"
:search="search"
:pagination.sync="pagination"
:rows-per-page-items="[15]"
hide-actions
>
<v-progress-linear slot="progress" color="purple" indeterminate></v-progress-linear>
<template slot="items" slot-scope="props">
  <td>{{ props.item.artist }}</td>
  <td class="text-xs-right">{{ props.item.track }}</td>
  <td class="text-xs-right">{{ props.item.tuning | tuning }}</td>
  <td class="text-xs-right">
    <v-btn 
    v-if="props.item.url" 
    depressed outline light 
    style="margin-top:1rem;margin-bottom:1rem;" 
    :href="props.item.url" 
    target="!blank">
      Tab
    </v-btn>
    <div class="text-xs-center" v-else-if="props.item.url == false">No tab :(</div>
    <v-btn 
    v-else 
    depressed outline light 
    style="margin-top:1rem;margin-bottom:1rem;" 
    v-on:click="getTab(props.item.artist, props.item.track, props.item)">
      Get Tab
    </v-btn>
  </td>
</template>
<v-alert slot="no-results" :value="true" style="color:black;" icon="warning">
  Your search for "{{ search }}" found no results.
</v-alert>
</v-data-table>

方法：

getTab(artist, track, item) {
  //const tabURL = "https://stark-beyond-77127.herokuapp.com/spotify/gettab";
  let itemIndex = this.playlist.indexOf(item)
  const tabURL = "http://localhost:5000/spotify/gettab";
  const tabJSON = {
    artist: artist,
    track: track
  };
  axios.post(tabURL, tabJSON).then(response => {
    let tuning = response.data[0].tuning;
    let url = response.data[0].url;
    this.playlist[itemIndex] = { ...this.playlist[itemIndex], ...{ tuning: tuning, url: url } };
    console.log(this.playlist[itemIndex]);
  });
}

我的猜测是我必须使用 computed: 或 watch: 但不知道如何实现它。谢谢

【问题讨论】：

您是如何尝试修改这些字段的？通过编辑按钮还是在线编辑？
@Jaya 有一个按钮 Get Tab 触发函数 getTab 插入从 API 获得的结果以纠正数组中的索引（如果有任何意义）。那么对于不同类型的结果有 v-if if(props.item.url)else if(props.item.url == false) 和 else。所以我要找的基本上是函数完成后文本相应更新

标签： javascript vue.js vuetify.js

【解决方案1】：

let itemIndex = this.playlist.indexOf(item)
let editedItem = { ...this.playlist[itemIndex], ...{ tuning: tuning, url: url } };
this.playlist.splice(itemIndex, 1, editedItem)

解决问题。我猜 splice 会强制进行 dom 刷新，而直接编辑数组则不会。

【讨论】：

谢谢。工作完美。我不知道 Vuex 需要刷新 DOM 才能将更新的值推送到引用中。

【解决方案2】：

如果有人也遇到这个问题，我想分享我的解决方案。

解决方案是在向 JSON 数组添加新属性之前将属性声明为 null。

在 OP 情况下，

const tabJSON = {
    artist: artist,
    track: track
    tuning: null,
    url: null
};

这是我的问题，除非单击排序按钮，否则不会显示添加到 json 对象数组的属性。

就我而言，我需要从 firestore 中检索数据并将属性添加到数组中。

db.collection("checkout")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      const data = {

        book_did: doc.data().book_did,
        borrowed_date: doc.data().borrowed_date.toDate(),
        due_date: doc.data().due_date.toDate(),

        book_title: null, // solution
        returned_date: null, // solution
        days_late: null // solution
      };
      this.checkout.push(data);
    });

    // modified this.checkout array here:
    Object.keys(this.checkout).forEach(key => {
      db.collection("books")
        .doc(this.checkout[key].book_did)
        .get()
        .then(snapshot => {
          this.checkout[key].book_title = snapshot.data().title;
        });
    });
  });

【讨论】：

【解决方案3】：

当你直接设置索引或者改变长度时，Vue 无法拾取数组中的变化。

见文章：Update Array and Object in Vuejs。

您可以使用：

Vue.set(vm.items, indexOfItem, newValue)

vm.items.splice(indexOfItem, 1, newValue)

【讨论】：

这并不能真正解决 vuetify 数据表的问题，因为数据表似乎没有响应数组更改。你可以在它旁边放一个 v-for 并观察新元素的更新，但数据表没有。
@DouglasGaskell 当我将 vm.items.push(newValue) 更改为 Vue.set(vm.items, indexOfItem, newValue) 时，这对我使用了 vuetify 数据表。使用 .set 推送没有来自数据表的响应。

【解决方案4】：

就我而言，意外行为来自 v-for 键。我的数据没有使用"id" 作为键。重新阅读文档后，我意识到 Vuetify 使用 "id" 作为项目的默认键。

解决方案是我必须为 v-data-table 指定 item-key 属性，以便它按预期运行。

例子：

data: () => ({
  playlist: [
    { key: 1, name: 'Foo' },
    { key: 2, name: 'Bar' },
  ],
}),

使用item-key：

<v-data-table :headers="headers" :items="playlist" item-key="key">

【讨论】：

【解决方案5】：

我认为这个闭包回调不是 this 包含你的数组。所以我有一个技巧来解决你的问题是为this设置变量

getTab(artist, track, item) {
  //const tabURL = "https://stark-beyond-77127.herokuapp.com/spotify/gettab";
  let itemIndex = this.playlist.indexOf(item)
  const tabURL = "http://localhost:5000/spotify/gettab";
  const tabJSON = {
    artist: artist,
    track: track
  };
const _this = this
  axios.post(tabURL, tabJSON).then(response => {
    let tuning = response.data[0].tuning;
    let url = response.data[0].url;
    _this.playlist[itemIndex] = { ...this.playlist[itemIndex], ...{ tuning: tuning, url: url } };
    console.log(this.playlist[itemIndex]);
  });
}

【讨论】：