Question

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

仅当我手动执行搜索或排序之类的操作时，此项目才会更新。（在数据表中）

我尝试通过getTab（）修改的字段是item.tuning和item.url

<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]);
  });
}

我的猜测是，我不得不使用compute：或watch：但不知道如何实现它。谢谢

Answer 1

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

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

Answer 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;
        });
    });
  });

Answer 3

就我而言，意外行为来自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">

Answer 4

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

请参阅文章：Update Array and Object in Vuejs。

您可以使用：

Vue.set（vm.items，indexOfItem，newValue）

vm.items.splice（indexOfItem，1，newValue）

Answer 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]);
  });
}

为什么Vuetify数据表无法正确更新？

5 个答案: