CODEWITHSUNDEEP
vue.jsvue-render-function
user14937663
user14937663

Reputation: 89

bind event didn't work in render function

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

Upvotes: 2

Views: 82

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

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

Upvotes: 1

Related Questions