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

Question

所以我用通过 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: 但不知道如何实现它。谢谢

原文由 breke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 breke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当您直接设置索引或更改长度时，Vue 无法获取数组中的更改。

请参阅文章： 在 Vuejs 中更新数组和对象。

相反，您可以使用：

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

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

原文由 Chris Herbst 发布，翻译遵循 CC BY-SA 4.0 许可协议