Таблица квазаров не обновляется (v1)

Question

У меня есть таблица квазаров, где свойство данных связано с состоянием Vuex (массив объектов). При изменении состояния объекта (строки в таблице) это изменение не отображается в таблице. Если я смотрю с помощью инструментов Vue dev, то странно то, что реквизит QTable Data действительно изменяется, но 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>

Ниже приведен код для полей ввода:

<q-card class="q-pa-md" v-if="showDetails && !showSelectors" style="margin: 10px 0;" >
    <q-icon name="eva-close-circle-outline" class="float-right close-icon" @click="cardClose"/>
    <q-input label="Name" color="negative" stack-label v-model="name" />
    <q-input label="Phone number" color="negative" stack-label v-model="phone" />
    <q-input label="Remarks" color="negative" stack-label v-model="remarks" />
    <q-select color="negative" v-model="locks" :options="Locks" label="Locks" multiple @input="selectLock"/>
    <q-select color="negative" v-model="schedules" :options="Schedules" label="Schedules" multiple @input="selectSchedule" />
    <q-select color="negative" v-model="keys" :options="Keys" label="Keys" multiple @input="selectKey" />
 </q-card>

А вот и свойства моего компьютера. Имя и Телефон - это свойства, которые вы видите в таблице. Если щелкнуть строку таблицы, для формы под таблицей устанавливается currentUser . Это сделано this.$store.commit('users/setCurrentUser', row)

computed: {
...mapState({
  users: state => state.users.users,
  currentUser: state => state.users.currentUser,
}),
name: {
  set (name) {
    this.$store.commit('users/setCurrentUser', { name })
    // this.$refs.table.computedData.rows = this.users
  },
  get () {
    return this.currentUser.name
  }
},
phone: {
  set (phone) {
    this.$store.commit('users/setCurrentUser', { phone })
  },
  get () {
    return this.currentUser.phone
  }
},

Наконец, вот код из магазина 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)
        }
      })
    }
  }
}

Answer 1

когда вы обновляете свои данные пользователя, вы можете снова вызвать содержимое таблицы

давайте посмотрим мой пример:

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

У меня есть два метода: во-первых, когда я запрашиваю маршрут API для изменения статуса, и во втором методе я отправляю статус при изменении выбора входного значения, наконец, я вызываю функцию запроса для перезагрузки таблицы, когда я выполняю свое обещание (помните, что ваша первая функция должна быть Promise) это моя функция запроса:

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

  })
  }