jspreadsheet / ce

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
https://bossanova.uk/jspreadsheet/v4
MIT License
6.7k stars 820 forks source link

component does not update after fetch request #1468

Closed JmiXIII closed 2 years ago

JmiXIII commented 2 years ago

trying to update Vuejs3 component jspreadsheet-ce (excellent js library) with fastpi request. Vue component does not update whereas data seems to update correctly.

FastAPI main.py extract :

@app.get("/rr/") async def create_rr(): return {"data" : [[1,1,5.25], [2,1,5.26], [3,1,5.27],[3,1,5.27],[3,1,5.27]]}

App.vue

<script>
import VueJSpreadsheet from "vue3_jspreadsheet";
import { ref } from "vue";

export default {
  components: {
    VueJSpreadsheet,
  },
  data() {
    const dataTable = ref([[1], [2], [3]]);

    return {
      dataTable,
    };
  },
  created: async function () {
    const rrResponse = await fetch("http://localhost:8000/rr");
    const rrObject = await rrResponse.json();
    this.dataTable = ref(rrObject.data);
    console.log(this.dataTable);
  },
};
</script>

{{dataTable}} update corretly but not I do not understand why component does not.

hodeware commented 2 years ago

You need to call instance.setData(yourFechedData)

JmiXIII commented 2 years ago

was a vue3_jspreadsheet issue => solved thansk to killkli

https://github.com/killkli/vue3_jspreadsheet/issues/2

Suggest to document this component !