Update external variable with event binding

Update external variable with event binding

Posted by: developers on 3 February 2021, 1:31 pm EST

• 

  developers

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 February 2021, 1:31 pm EST

  Hi, we’re developing a prototype with VueJS testing all the features we’ll need for our final product.
  
  We want to show the worksheet list and update whenever we delete a sheet, but we still haven’t found a working solution.
  
  This is a snippet of our component:

  
  export default {
      name: 'SpreadSheetPrototype',
      data() {
          return {
              spread: null,
              sheetItemList: [],
          };
      },
      methods: {
          initSpread: function(spread) {
              this.spread = spread;
              let GCSheets = GC.Spread.Sheets;
  
              this.spread.bind(GCSheets.Events.SheetChanged, function(sender, args) {
                  if (args.propertyName === 'deleteSheet') {
                      console.log('Deleted ' + args.sheetName); // display 'Deleted Sheet 1'
  
                      const numberOfSheets = spread.getSheetCount();
                      let sheetList = [];
                      for (let sheetIndex = 0; sheetIndex < numberOfSheets; sheetIndex++) {
                          sheetList.push({ index: sheetIndex, sheetName: spread.getSheet(sheetIndex).name() });
                      }
                      this.sheetItemList = sheetList; // this.sheetItemList is undefined
                  }
              });
  
  

  Do you have any suggestion in order develop this feature?
  
  Thanks in advance for any help,

  Ciro

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 4 February 2021, 9:28 am EST

  Hi Ciro,

  As per the code snippet, you have passed the handler as a function that is why this.sheetItemList is given as undefined. for this, you may pass the event handler as an arrow function. Please refer to the following code snim ppet and let us know f you face any issues.

  
  export default {
      name: 'SpreadSheetPrototype',
      data() {
          return {
              spread: null,
              sheetItemList: [],
          };
      },
      methods: {
          initSpread: function(spread) {
              this.spread = spread;
              let GCSheets = GC.Spread.Sheets;
  
              this.spread.bind(GCSheets.Events.SheetChanged, (sender, args) => {
                  if (args.propertyName === 'deleteSheet') {
                      console.log('Deleted ' + args.sheetName); // display 'Deleted Sheet 1'
  
                      const numberOfSheets = spread.getSheetCount();
                      let sheetList = [];
                      for (let sheetIndex = 0; sheetIndex < numberOfSheets; sheetIndex++) {
                          sheetList.push({ index: sheetIndex, sheetName: spread.getSheet(sheetIndex).name() });
                      }
                      this.sheetItemList = sheetList; // this.sheetItemList is undefined
                  }
              });
  
  

  Regards
  
  Avinash

• 

  developers

  • Post Options:
  • Link
    Copy

  Posted 4 February 2021, 12:08 pm EST

  Hi Avinash,
  
  thank you very much for the help.
  
  It works!
  
  Regards,

  Ciro