vue.js - Quasar 表未更新 (v1)

Question

我有一个 Quasar 表，其中数据属性连接到 Vuex 状态(对象数组)。当一个对象(表中的一行)的状态发生变化时，这种变化在表中是不可见的。如果我使用 Vue 开发工具查看，奇怪的是 QTable Data Prop 确实发生了变化，但 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

我通过强制 Vue 通过 key-changing

重新渲染组件来建议以下解决方案

<q-table
    :key="tableKey"
...
>
...
</q-table>

data() {
      return {
        tableKey: 0,
}
},
   methods: {
    updateData() {
// Vuex logics or others
      this.tableKey = 1
}
},