Quasar 테이블이 업데이트되지 않음(v1)

Quasar 테이블이 업데이트되지 않음(v1)

데이터 속성이 Vuex 상태(객체의 배열)에 연결된 Quasar 테이블이 있습니다.오브젝트(테이블의 행)의 상태가 변경되면 이 변경은 테이블에 표시되지 않습니다.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>

그리고 이게 내 컴퓨터 속성이야.[이름(Name)]와 [전화(Phone)]는 표에 표시되는 속성입니다.테이블 행을 클릭하면 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)
        }
      })
    }
  }
}

Vue가 키 변경을 통해 컴포넌트를 강제로 재렌더함으로써 다음과 같은 해결책을 제안합니다.

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

data() {
      return {
        tableKey: 0,
}
},
   methods: {
    updateData() {
// Vuex logics or others
      this.tableKey = 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})

  })
  }

언급URL : https://stackoverflow.com/questions/55740044/quasar-table-not-updating-v1