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 重新渲染？无论是在本地、异步还是通过 websockets 从外部

我认为这一切都应该是响应式(Reactive)的和自动的，这就是我选择框架而不是 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)