Vue.js 类星体表未更新（v1）

我有一个类星体表，其中数据属性连接到Vuex状态（一个对象数组）。 当对象（表中的一行）的状态更改时，此更改在表中不可见。 如果我使用Vue开发工具，奇怪的是QTable数据属性确实发生了更改，但computedData.rows和computedRows没有更新

如何强制更新表行？我希望更改在表中可见。

在下图中，您可以看到表行未更新，但表的数据属性具有更新的属性

在第二张图片中，您可以看到computerData.rows属性未更新。表的computerRows属性也是如此

下面是QTable的定义方式

<q-table
  :data="users"
  :columns="columns"
  :selection="showSelectors ? 'multiple' : 'none'"
  :selected.sync="selected"
  :pagination.sync="pagination"
  @update:pagination="pageChanged"
  hide-header
  row-key="id">
  <template v-slot:body="props">
    <q-tr :props="props" @click.native="click(props.row)" v-touch-hold.mouse="longPress">
      <q-td auto-width v-if="showSelectors">
        <q-checkbox dense v-model="props.selected" />
      </q-td>
      <q-td key="name" :props="props">{{ props.row.name }}</q-td>
      <q-td key="phone" :props="props">{{ props.row.phone }}</q-td>
    </q-tr>
  </template>
 </q-table>

最后，以下是Vuex存储区的代码：

import { getUsers, saveUsers } from '../helpers/database'

export default {
  namespaced: true,
  state: {
    users: [],
    currentUser: {}
  },
  mutations: {
     setUsers (state, users) {
        state.users = users
     },
     setCurrentUser (state, payload) {
       state.currentUser = Object.assign({}, state.currentUser, payload)
       const index = state.users.findIndex(u => u.id === state.currentUser.id)
       state.users[index] = state.currentUser
       saveUsers(state.users)
     }
  },
  actions: {
    getUsers ({ commit }) {
      getUsers()
      .then(result => {
        if (!result) {
          saveUsers(seedUsers)
          commit('setUsers', seedUsers)
        } else {
          commit('setUsers', result)
        }
      })
    }
  }
}

---

更新用户详细信息时，可以再次调用表内容

让我们看看我的例子：

  <q-td key="status_id" :props="props">
                <q-chip tag  :color="props.row.status.color">
                    {{props.row.status.name}}
                </q-chip>
                <q-popup-edit  v-model="props.row.status">
                    <q-select
                            v-model="props.row.status"
                            :value="props.row.status"
                            :options="selectStatuses"
                            :placeholder="props.row.status.name"
                            @input="submitStatus(props.row.status,props.row.id)"
                    />
                </q-popup-edit>
            </q-td> 

我有两种方法：第一种方法是，当我请求API路由以更改状态时，第二种方法是在选择输入值更改时提交状态，最后，当我解决我的承诺时，我调用我的请求函数以重新加载表（请记住，您的第一个函数必须是承诺） 这是我的请求函数：

    request({pagination, filter}) {
        this.loading = true
        axiosInstance.get('qc/samples?' + qs.stringify(pagination)).then(function (response) {
    state.commit('samplesList', response.data.data)

  }).catch(function (error) {
    Notify.create({type: 'negative', message: error.response.data.message})

  })
  }

  <q-td key="status_id" :props="props">
                <q-chip tag  :color="props.row.status.color">
                    {{props.row.status.name}}
                </q-chip>
                <q-popup-edit  v-model="props.row.status">
                    <q-select
                            v-model="props.row.status"
                            :value="props.row.status"
                            :options="selectStatuses"
                            :placeholder="props.row.status.name"
                            @input="submitStatus(props.row.status,props.row.id)"
                    />
                </q-popup-edit>
            </q-td> 

 changeStatus(val,id):{
return new Promise((resolve,reject)=>{
    return  axiosInstance.put('qc/samples/update/' + id, {status_id: val}).then(response=>{
      resolve( Notify.create({type: 'positive', message: 'Status changed successfully'}))
    })
  })
}

changeStatus(val, id) {
    this.submit(val, id).then(
      this.request({pagination: this.pagination, filter: this.filter})
    )
  },

    request({pagination, filter}) {
        this.loading = true
        axiosInstance.get('qc/samples?' + qs.stringify(pagination)).then(function (response) {
    state.commit('samplesList', response.data.data)

  }).catch(function (error) {
    Notify.create({type: 'negative', message: error.response.data.message})

  })
  }