bind event didn't work in render function

Question

this is the component BadCodeSelector, it emit an function confirm, when button clicked, the method confirm worked.

<template>
 <div class="BadCodeSelector-buttons">
    <el-button size="small" type="warning" @click="beforeClose">取消</el-button>
    <el-button
      size="small"
      type="primary"
      @click="confirm"
    >
      确定
    </el-button>
  </div>
</template>

<javascript>
export default {
  props: {
    materialTypeCode: String,
    activeRow: Object
  },
  methods: {
     confirm() {
      this.$emit('confirm', this.badCodeData)
      console.log('confirm function emit')
    },
  }

}

</javascript>

but in the render function, the confirm function did't work

onShowBadCodeSelector(row) {
  const hide = this.$dialog.show({
    dialogProps: {
      title: '不良代码'
    },
    render: () => {
      return (
      <BadCodeSelector
        materialTypeCode={this.mainFormData.materialTypeCode}
        activeRow={row}
        v-on:confirm={confirm}
      />
    )
    }
  })
  const confirm = data => {
    console.log('function emited')
    hide()
  }
}

the function in component worked, but didn't work in onShowBadCodeSelector

the confirm function work in render function

The vue version is 2.5.17 – user14937663 Feb 21 '23 at 05:38 — user14937663, Feb 21 '23 at 05:38

score 1 · Accepted Answer · answered Feb 21 '23 at 05:54

1

In JSX the event should have this syntax onEventName, on+EventName capitalized :

   <BadCodeSelector
        materialTypeCode={this.mainFormData.materialTypeCode}
        activeRow={row}
        onConfirm={confirm}
      />

answered Feb 21 '23 at 05:54

Boussadjra Brahim

82,684
19
144
164

thanks , it worked。but I have another question, v-on also worked some time。 This seems to have no pattern ， it worked in another component. ` hide()} /> ` – user14937663 Feb 21 '23 at 06:01
Please check https://vuejs.org/guide/extras/render-function.html#v-on – Boussadjra Brahim Feb 21 '23 at 06:03
1

I found that It's not the the syntax problem, v-on and on+EventName are both worked. It's the function definition. when i use 'function confirm(){}', it worked, and when its 'const onConfirm=() =>{}', it did't work. Its an low level error i made... – user14937663 Feb 21 '23 at 06:41

bind event didn't work in render function

1 Answers1