1. Home
  2. Forum
  3. Vue
  4. Cannot use v-for e-column in Vue 3

Cannot use v-for e-column in Vue 3

Hi synfusion, Im newbie in Vuejs.

When I use static column to declare columns for datagrid, it work fine.

But when I use v-for. DataGrid not renderer e-column

Code here:


<template>
<ejs-grid ref="grid" :dataSource="data">
    <e-columns>
        <!-- <e-column field="C1" :headerText="'C1'" width="120" /> -->

        <!-- Cannot use v-for with e-column in Vue 3 -->
        <e-column v-for="field in fields" :key="field.Name" :field="field.Name" :headerText="field.Name" width="120" />
    </e-columns>
</ejs-grid>
</template>

<script>
import {
    GridComponent,
    ColumnsDirective,
    ColumnDirective
} from "@syncfusion/ej2-vue-grids";

export default {
    name: "GridBase",
    components: {
        "ejs-grid": GridComponent,
        "e-columns": ColumnsDirective,
        "e-column": ColumnDirective,
    },
    data: () => ({
        fields: [{
                Name: 'C1'
            },
            {
                Name: 'C2'
            },
            {
                Name: 'C3'
            },
            {
                Name: 'C4'
            },
        ],
        data: [{
                C1: 10248,
                C2: 'VINET',
                C3: 32.3800,
                C4: "1996-07-02T00:00:00.000Z"
            },
            {
                C1: 10249,
                C2: 'TOMSP',
                C3: 32.3800,
                C4: "1996-07-19T00:00:00.000Z"
            },
            {
                C1: 10250,
                C2: 'HANAR',
                C3: 32.3800,
                C4: "1996-07-22T00:00:00.000Z"
            }
        ]
    }),
};
</script>

<style>
</style>


package.json:

"dependencies": {
        "@microsoft/signalr": "^5.0.7",
        "@syncfusion/ej2-base": "^19.2.44",
        "@syncfusion/ej2-popups": "^19.2.44",
        "@syncfusion/ej2-vue-buttons": "^19.2.44",
        "@syncfusion/ej2-vue-grids": "^19.2.44",
        "@syncfusion/ej2-vue-inputs": "^19.2.44",
        "@syncfusion/ej2-vue-layouts": "^19.2.44",
        "@syncfusion/ej2-vue-lists": "^19.2.44",
        "@syncfusion/ej2-vue-navigations": "^19.2.44",
        "core-js": "^3.15.2",
        "npm": "^7.19.1",
        "vue": "^3.1.4",
        "vue-class-component": "^8.0.0-rc.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.1.4",
        "babel-core": "^6.26.3",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.2",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
    },


Please check it.

Thanks you.


6 Replies
RR Rajapandi Ravi Syncfusion Team July 12, 2021 12:43 PM UTC

Hi Nguyen, 

Greetings from syncfusion support 

After validating further with the source, we have confirmed and logged this as a bug in the component. So, we have considered “v-for malfunctions in Syncfusion Vue 3 components” as a defect and logged a report for the same. It is expected to be available with July 20, 2021. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 


Regards, 
Rajapandi R 


NK Nguyen Khoa Lu July 12, 2021 01:39 PM UTC

Thanks you


RR Rajapandi Ravi Syncfusion Team July 13, 2021 04:41 AM UTC

Hi Nguyen, 

Thankyou. Currently we are working on it and we will update you details as we promised. 

Regards, 
Rajapandi R 


NK Nguyen Khoa Lu July 21, 2021 01:59 PM UTC

It fixed if column is created in data function, but when columns has been set when mounted it still not working.

Version: 19.2.48

<template>
  <div>
    <ejs-grid :dataSource="data" :allowPaging="true">
      <e-columns>
        <e-column
          v-for="(column, x) in columns"
          :key="x"
          :field="column.field"
          :headerText="column.headerText"
        ></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";

import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Page,
} from "@syncfusion/ej2-vue-grids";
import { createApp } from "vue";

export default {
  name: "App",
  components: {
    "ejs-grid": GridComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective,
  },
  data() {
    return {
      target: "#target",
      height: "100%",
      width: "435px",
      data: [
        {
          OrderID: 10248,
          CustomerID: "VINET",
          ShipCountry: "France",
        },
        {
          OrderID: 10249,
          CustomerID: "TOMSP",
          ShipCountry: "Germany",
        },
      ],
      columns: [],
    };
  },
  mounted() {
    this.columns = [
      { field: "OrderID", headerText: "OrderID", width: "120" },
      { field: "CustomerID", headerText: "Customer ID", width: "120" },
    ];
  },
  // module injection
  provide: {
    grid: [Page],
  },
};
</script>



NK Nguyen Khoa Lu replied to Rajapandi Ravi July 23, 2021 06:29 AM UTC

Any solution for this?


RR Rajapandi Ravi Syncfusion Team July 26, 2021 10:55 AM UTC

Hi Nguyen, 

Thanks for the update 

If you would like to render the columns dynamically, we suggest you use the Grid inbuilt methods and call the refreshColumns() method for generating the models properly. Please refer the below code example and sample for more information. 

App.vue 
 
mounted() { 
      var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; //Grid instance 
       grid.columns= [ 
        { field: "OrderID", headerText: "OrderID", width: "120" }, 
        { field: "CustomerID", headerText: "Customer ID", width: "120" }, 
      ] 
      grid.refreshColumns();  // call the refreshColumns() method for generating the models properly 
  } 
 



Regards, 
Rajapandi R 


Loader.
Up arrow icon