为什么 Vuetify 数据表没有正确更新? [英] Why is Vuetify Data table not updating correctly?

问题描述

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

So I'm populating the data table with items fetched via API and it is working fine, but if I want to edit any of the fields it's not quite working out.

该项目仅在我手动执行搜索或排序等操作时更新.(数据表内)

The item only updates if I manually do something like search or sort. (inside the data table)

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

The fields I'm trying to modify are item.tuning and item.url via 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]);
  });
}

我的猜测是我必须使用计算:或观察:但不知道如何实现.谢谢

My guess here is that I'd have to use computed: or watch: but dont know how to implement that. Thanks

推荐答案

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

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

Fixes the problem. I'd guess splice forces a dom refresh that directly editing array didn't.

这篇关于为什么 Vuetify 数据表没有正确更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！