我有一个Quasar表,其中data属性连接到Vuex状态(对象数组)。 当对象的状态(表中的行)更改时,此更改在表中不可见。 如果我使用Vue开发工具,那么奇怪的是QTable Data属性确实发生了变化,但是computeData.rows和computeRows不会更新。
如何强制对表行进行更新?我希望更改在表中可见。
在下面的图片中,您可以看到表行未更新,但是表的数据属性具有updated属性。
在第二张图片中,您可以看到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)
}
})
}
}
}
答案 0 :(得分:1)
我建议以下解决方案,强制 Vue 通过键更改
重新渲染组件<q-table
:key="tableKey"
...
>
...
</q-table>
data() {
return {
tableKey: 0,
}
},
methods: {
updateData() {
// Vuex logics or others
this.tableKey = 1
}
},
答案 1 :(得分:0)
更新用户详细信息时,您可以再次调用表格内容
让我看看示例:
<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})
})
}