VueJs blur javascript error

Spreadsheet
#1

After following the sample & setting up a spreadsheet (v3.1.4) in a new VueJs (2.6.11) project, when I run I get a js error after selecting a cell for edit and blurring:

Uncaught TypeError: Cannot read property 'input' of null
at e.blur (spreadsheet.min.js?45dd:21)
at e.endEdit (spreadsheet.min.js?45dd:12)
at t.eval (spreadsheet.min.js?45dd:12)
at eval (spreadsheet.min.js?45dd:12)
at Array.map (<anonymous>)
at t.fire (spreadsheet.min.js?45dd:12)
at t.setSelectedCell (spreadsheet.min.js?45dd:21)
at eval (spreadsheet.min.js?45dd:21)
at eval (spreadsheet.min.js?45dd:12)
at Array.map (<anonymous>)

and

spreadsheet.min.js?45dd:12 Uncaught TypeError: Cannot read property 'el' of null
at e._restoreFocus (spreadsheet.min.js?45dd:12)
at eval (spreadsheet.min.js?45dd:12)

Any ideas? Are there any working examples? Currently evaluating the component

#2

Could you please share a code with your spreadsheet initialization.

#3 
<template>
  <v-row class="fill-height" no-gutters>
<v-col :cols="4">
  <div ref="container" class="widget-box fill-height pa-0 ma-0 sheet"></div>
</v-col>
<v-col :cols="8">
  <apexchart class="fill-height pa-2" type="line" :options="options" :series="series"></apexchart>
</v-col>
  </v-row>
</template>

<script>
import { Spreadsheet } from "dhx-spreadsheet";
import "dhx-spreadsheet/codebase/spreadsheet.min.css";
import store from "../store";
import Vue from "vue";
import VueApexCharts from "vue-apexcharts";

Vue.use(VueApexCharts);
Vue.component("apexchart", VueApexCharts);

export default {
  props: {
toolbar: Array,
editLine: { type: Boolean, default: false },
menu: Boolean,
rowsCount: Number,
colsCount: Number
  },
  data: function() {
return {
  spreadsheet: null,
  events: "",
  options: {
    chart: {
      id: "vuechart-example"
    },
    xaxis: {
      categories: []
    }
  },
  series: [
    {
      name: "series-1",
      data: []
    }
  ]
};
  },
  mounted: function() {
this.spreadsheet = new Spreadsheet(this.$refs.container, {
  toolbar: this.toolbar,
  editLine: this.editLine,
  menu: this.menu,
  rowsCount: this.rowsCount,
  colsCount: this.colsCount
});

for (let i = 1; i < store.state.payments.length; i++) {
  const cell = "A" + i;
  const value = store.state.payments[i];
  this.spreadsheet.setValue(cell, value);
}

this.spreadsheet.events.on("afterValueChange", (cell, value) => {
  console.log(`Value in cell ${cell} changed to ${value}`);
  const payload = { cell: 4, amount: value };
  store.state.setPayment(payload);
});

this.updateChart();
  },
  methods: {
updateChart() {
  this.series = [
    {
      data: store.state.payments
    }
  ];
}
  },
  beforeDestroy: function() {
this.spreadsheet.destructor();
  }
};
</script>

<style scoped>
.sheet {
  width: 100%;
}
</style>
#4

Please, try to enable the editLine in your spreadsheet as a temporal workaround:

 editLine: true,
#5

Yes that has worked. Thank you