javascript - 让 Vue 在对象更新时进行更新

Question

当我更新 Vuex 中的对象时，如何让 Vue js 更新？

现在我有一个突变

EDIT_USER (state, user) {
    const record = state.users.find(element => element.id === user.id)
    let index = state.users.indexOf(record)
    state.users[index] = user
},

这适用于对象级别，并且在控制台中 state.users 对象确实已更新。但 View 不会自动更新。

如果我先拼接，然后推送，它会按预期工作，并且 View 会更新......但它很难看。

  EDIT_USER (state, user) {
     const record = state.users.find(element => element.id === user.id)
     state.users.splice(state.users.indexOf(record),1)s
     state.users.push(user)
  },

它很难看，因为之后，它显然位于一个新索引，这使得它在更新后在 TableView 中跳转。这里并不是真正想要的用户体验。

我更喜欢“就地编辑”风格的东西。

如果我只是更新对象，如何让 Vue 重新渲染？本地、异步或通过 websocket 从外部进行

我认为这一切都应该是 react 性的、自动的，这就是我选择框架而不是 Jquery 的原因。但它开始看起来 Jquery 会是更好的选择，因为我几个小时前就已经解决了这个问题，而不是在这样一个愚蠢的事情上被困 5 个小时。

Answer 1

请参阅 Vue 文档中的此部分: https://v2.vuejs.org/v2/guide/list.html#Caveats

您需要使用以下方法之一让 Vue 检测数组变化。

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)