Pass Parameter To Template In Syncfusion Vue - gecko-8/devwiki GitHub Wiki

Locally defined template

The important note here is that Syncfusion template definitions expect a method that returns an object defining the template. So to use a parameter in the template definition, you're template creation function (with parameter) needs to return a function.

<template>
...
<e-column field="myfield" headerText="My Field" :template="myTemplate(parameterValue)"></e-column>
...
</template>

<script>
import Vue from 'vue';

export default {
  data: function() {
    return {
      // Templates
      myTemplate(parameter) {
        return function() { // This is necessary to keep Syncfusion happy!
          return {
            template: Vue.component('myTemplate', {
              template: `<div>My parameter is ${parameter}</div>`
            })
          }
        }
      }
    }
  }
}
</script>

Template defined in separate .vue file

The template should have a prop (named parameterValue in the example) defined for the parameter value.

NOTE: This hasn't been confirmed but looks promising.

<template>
...
<e-column field="myfield" headerText="My Field" :template="myTemplate(parameterValue)"></e-column>
...
</template>

<script>
import Vue from 'vue';
import MyTemplate from './MyTemplate.vue';

export default {
  data: function() {
    return {
      // Templates
      myTemplate(parameter) {
        return function() { // This is necessary to keep Syncfusion happy!
          return {
            template: {
              extends: MyTemplate,
              propsData: {
                parameterValue: parameter 
              }
            }
          }
        }
      }
    }
  }
}
</script>
⚠️ **GitHub.com Fallback** ⚠️