vue3 script setup not working with revogrid

Question

I have a vue3 app, in which I'd like to keep using the standard composition api style. Unfortunately, RevoGrid doesn't seem to like it. RevoGrid works with an options api style , but the equivalent doesn't render any content. The wrappers are there, but that's it. I thought the 2 script snippets below were functionally identical, but that does not seem to be the case. The only real difference I can see is that the options api version registers the VGrid component locally. I was under the impression that when using one didn't need to register a component, you just import it and then use it in the template. What is different about RevoGrid, and how can avoid having to code these couple of views that use it with an old style ?

<script>
  import VGrid from "@revolist/vue3-datagrid";

  export default {
    components: {
      VGrid,
    },
    data() {
      return {
        columns: [{ prop: "name" }, { prop: "details" }],
        rows: [
          { name: "Joe", details: "Stuff 1", },
          { name: "Jane", details: "Stuff 2", },
          { name: "John", details: "Stuff 3", }
        ]
      };
    },
  };
</script>

<script setup>
    import VGrid from "@revolist/vue3-datagrid";
    
    const props = defineProps({
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [
        { name: "Joe", details: "Stuff 1", },
        { name: "Jane", details: "Stuff 2", },
        { name: "John", details: "Stuff 3", }
      ]
    });
</script>

<template>
  <div id="revoEx">
    <VGrid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></VGrid>
  </div>
</template>

Alexander Nenashev · Accepted Answer · 2024-01-21 08:53:34Z

2

You have your data as actual data in Options API but for some reason you moved it as props in Composition API. The props should be provided by the parent component.

defineProps expect an object for each prop, you provided arrays, which have no meaningful properties for defineProps so basically your data arrays are ignored and the columns and rows are undefined. That's why nothing is rendered.

You need to convert it back to data:

<script setup>
    import VGrid from "@revolist/vue3-datagrid";
    
    const columns = [{ prop: "name" }, { prop: "details" }];
    const rows = [
        { name: "Joe", details: "Stuff 1", },
        { name: "Jane", details: "Stuff 2", },
        { name: "John", details: "Stuff 3", }
      ];

</script>

<template>
  <div id="revoEx">
    <VGrid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></VGrid>
  </div>
</template>

answered Jan 21, 2024 at 8:53

Alexander Nenashev

26.1k3 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shane Petroff Over a year ago

Sorry, defineProps was grasping at straws. My first version was just like yours, only wrapped in ref() eg: const columns = ref([{ prop: "name" }, { prop: "details" }]); Any idea why ref() wrapers don't work?

Alexander Nenashev Over a year ago

@ShanePetroff you don't need refs here since the data is static

Shane Petroff Over a year ago

Yes, the data here are static, but this is just a minimal version. A realistic version would have the data loaded from a REST api. I assumed that I'd declare them as ref([]), then load them onMounted(). Oddly using refs renders less than using props.

Collectives™ on Stack Overflow

vue3 script setup not working with revogrid

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related