Unable to render a component in editing mode

[hamza005]

Hi,

I'm using ag-grid to show and edit some records. In my ag-grid defination, I'm adding a cellEditorComponent as:

this.columnDefs = this.columns.map((el, i) => { return { headerName: el.attributeName, attributeId: el.attributeId, field: el.field, resizable: true, editable: true, cellEditorSelector: (params) => { return { component: TextBoxEditor } } } })

In my TextBoxEditor.vue, here is the following code:

`<template>
 <input
 :ref="'input'"
 v-model="value"
 class="simple-input-editor"
 @keydown="onKeyDown($event)"
 />
</template>
<script>
import Vue from 'vue'
const KEY_BACKSPACE = 'Backspace'
const KEY_DELETE = 'Delete'
const KEY_ENTER = 'Enter'
const KEY_TAB = 'Tab'
export default Vue.extend({
data() {
return {
  value: '',
  cancelBeforeStart: true
 }
 },
created() {
this.setInitialState(this.params)
this.cancelBeforeStart =
  this.params.charPress && !'1234567890'.includes(this.params.charPress)
 },
mounted() {
this.$nextTick(() => {
  // need to check if the input reference is still valid - if the edit was cancelled before it started there
  // wont be an editor component anymore
  if (this.$refs.input) {
    this.$refs.input.focus()
  }
  })
  },
  methods: {
  getValue() {
  return this.value
  },
  isCancelBeforeStart() {
  return this.cancelBeforeStart
  },
  setInitialState(params) {
  let startValue
  if (params.key === KEY_BACKSPACE || params.key === KEY_DELETE) {
    // if backspace or delete pressed, we clear the cell
    startValue = ''
  } else if (params.charPress) {
    // if a letter was pressed, we start with the letter
    startValue = params.charPress
  } else {
    // otherwise we start with the current value
    startValue = params.value
  }
  this.value = startValue
  },
  // will reject the number if it greater than 1,000,000
  // not very practical, but demonstrates the method.
 isCancelAfterEnd() {
  return this.value > 1000000
  },
  onKeyDown(event) {
  if (event.key === 'Escape') {
    return
   }
  if (this.isLeftOrRight(event) || this.deleteOrBackspace(event)) {
    event.stopPropagation()
    return
   }
  if (
    !this.finishedEditingPressed(event) &&
    !this.isKeyPressedNumeric(event)
   ) {
    if (event.preventDefault) event.preventDefault()
   }
  },
  isCharNumeric(charStr) {
  return /\d/.test(charStr)
  },
  isKeyPressedNumeric(event) {
  const charStr = event.key
  return this.isCharNumeric(charStr)
 },
  finishedEditingPressed(event) {
  const key = event.key
  return key === KEY_ENTER || key === KEY_TAB
 },
deleteOrBackspace(event) {
  return [KEY_DELETE, KEY_BACKSPACE].includes(event.key)
},
isLeftOrRight(event) {
  return ['ArrowLeft', 'ArrowRight'].includes(event.key)
}
}
})
</script>

`

While editing, I'm getting the error as 'Params are not defined'