Javascript 为什么Vuetify数据表更新不正确？

因此，我用通过API获取的项填充数据表，它工作正常，但是如果我想编辑任何字段，它都不太正常

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

我试图修改的字段是

item.tuning

和

item.url

via getTab（）

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

---

解决了这个问题。我猜splice强制进行dom刷新，而直接编辑数组却没有。如果有人也面临这个问题，我想分享我的解决方案

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

null

在这种情况下

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

---

在我的例子中，意外行为来自v-for键。我的数据没有使用

“id”

作为键。重新阅读文档后，我意识到Vuetify正在使用

“id”

作为项目的默认键

解决方案是，我必须为v-data-table指定

项键

道具，使其按预期运行

例如：

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

使用

项目键

：

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

---

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

见文章：

相反，您可以使用：

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

---

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

我认为闭包回调中的这个

不是包含数组的这个
。
所以我有一个技巧来解决你的问题，就是为
这个

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

您如何尝试修改这些字段？通过编辑按钮或在线编辑？@Jaya有一个按钮Get选项卡，可以启动函数getTab，将从API获得的结果插入数组中的正确索引（如果有意义的话）。因此，对于不同类型的结果if（props.item.url）else if（props.item.url==false）和else，还有v-if。所以我要找的基本上是，在函数完成后，文本会相应地更新。工作得很好。我不知道Vuex需要DOM刷新才能将更新后的值推送到引用中。这并不能真正解决vuetify数据表的问题，因为数据表似乎不响应数组更改。您可以在它旁边有一个v-for，并用新元素观察该更新，但数据表没有。@DouglasGaskell当我将vm.items.push（newValue）更改为Vue.set（vm.items，indexOfItem，newValue）时，这对vuetify数据表很有效。使用push时，数据表中没有响应。设置它工作。
data: () => ({
  playlist: [
    { key: 1, name: 'Foo' },
    { key: 2, name: 'Bar' },
  ],
}),

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

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