사용 가능한 업데이트 컨텐츠 데이터 문제

사용 가능한 업데이트 컨텐츠 데이터 문제

나는 실행하려고 노력하고 있다.handsontable. 내 요구대로, 나는 다시 렌더링하고 싶다.handsontable드롭다운 값 변경, 그러나 드롭다운 선택 시handsontable올바르게 업데이트되지 않음.다음은 내 코드:

손 쓸 수 있는.vue:

<template>
  <div id="hot-preview">
    <HotTable :settings="settings" :ref="referenceId"></HotTable>
    <div></div>
  </div>
</template>

<script>
import { HotTable } from '@handsontable-pro/vue';

export default {
  components: {
    HotTable
  },
  props: ['settings', 'referenceId'],
}
</script>

<style>
#hot-preview {
  max-width: 1050px;
  height: 400px;
  overflow: hidden;
}
</style>

상위 구성 요소:

<template>
  <div id="provisioning-app">
    <v-container grid-list-xl fluid>
      <v-select
          :items="selectList"
          item-text="elementName"
          item-value="elementName"
          label="Standard"
          v-model="selected"></v-select>
        <handsontable :settings.sync="settings" :referenceId="referenceId"></handsontable>
     </v-container>
  </div>
</template>

<script>
import Handsontable from '@/components/Handsontable';
import PrevisioningService from '@/services/api/PrevisioningService';

export default {
  components: {
    Handsontable
  },
  data: () => ({
    selectList: [],
    selectApp: [],
    selectedOption: '',
    referenceId: 'provision-table',
  }),

  created(){
    PrevisioningService.getProvisioningList(this.$session.get('userId'), this.$session.get('customerId')).then(response => {
      this.provisioningList = response;
    });
  },

  beforeUpdate() {
    this.provisioningApp = this.getProvisioningAppList;
  },
  computed: {
    settings () {
      return {
          data: this.getSelectApp,
          colHeaders: ["Data Uploaded on", "Duration in Minutes", "Start Time", "Shift","Description","Next Day Spill Over", "Site Name"],
          columns: [
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'}
          ],
          rowHeaders: true,
          dropdownMenu: true,
          filters: true,
          rowHeaders: true,
          search: true,
          columnSorting: true,
          manualRowMove: true,
          manualColumnMove: true,
          contextMenu: true,
          afterChange: function (change, source) {
            alert("after change");
          },
          beforeUpdate: function (change, source) {
            alert("before update");
          }
        }
    },

    getSelectApp () {
      if(this.selectedOption !== undefined && this.selectedOption !== null && this.selectedOption !== ''){
        PrevisioningService.getProvisioningAppList(this.selectedOption, this.$session.get('userId'), this.$session.get('customerId')).then(response => {
          this.provisioningApp = response;
          return this.provisioningApp;
        });
      }
    }
  },
  method: {
    getSelected () {
      return this.selectedOption;
    }
  }
};
</script>

위의 코드로, 내 데이터는 서버에서 성공적으로 수신되지만, 다음에서 데이터를 업데이트할 수 없는 경우handsontable, 다음 스크린샷에 표시된 바와 같이:

드롭다운 선택 후 테이블을 올바르게 렌더링하려면 어떻게 해야 하는가?

나는 두 가지 문제를 본다.

• handsontable다이나믹을 다루지 않는 것 같다.settings(콘솔 오류 참조)settings계산된 속성이 아니어야 한다.업데이트해야 하는 설정 속성은settings.data, 그 속성만 변이되어야 한다(즉, 의 값을 재설정하지 말라).settings).

  이 문제를 해결하려면 이동하십시오.settings로data(), 초기화 중settings.data로null계속 반응할 수 있도록:

  data() {
    settings: {
      data: null,
      colHeaders: [...],
      ...
    }
  },
  computed: {
    // settings() { }  // DELETE THIS
  }
  

• getSelectApp잘못 비동기화된 계산된 속성이다(즉, 이 경우 데이터를 가져오고 나중에 응답을 처리함).계산된 속성은 비동기적일 수 없으므로 이 계산된 속성은 실제로 반환된다.undefined.가 있는 동안return계산된 속성 내에서 콜백(callback) 내에 있기 때문에 반환은 계산된 속성의 값을 설정하지 않는다.

  PrevisioningService.getProvisioningAppList(/*...*/).then(response => {
    this.provisioningApp = response;
    return this.provisioningApp; // DOES NOT SET COMPUTED PROPERTY VALUE
  });
  

  또한 다음과 같은 부작용에 유의하십시오.this.provisioningApp = response. 아닌 것 같다.this.provisionApp어떤 경우에도 이 코드에 필요하므로 정리 작업으로 제거해야 한다.

  이 계산된 속성의 의도는 업데이트하기 위한 것 같다.settings.data선택한 옵션의 값에 기반하여그러기 위해서는, 당신은 감시자를 사용해야 할 것이다.selectedOption, 어느것이 변할 것인가.settings.data.

  watch: {
    selectedOption(val) {
      PrevisioningService.getProvisioningAppList(/*...*/).then(response => {
        this.settings.data = response;
      });
    }
  },
  

데모를 하다

참조URL: https://stackoverflow.com/questions/52880602/issue-with-update-content-data-in-handsontable