[vue.js/JSX] babel 문법에서 vue의 @keyup.enter.native 쓰는 법

cateto·2021년 11월 22일
0
post-thumbnail
<template>
  <el-tree
    v-loading="listLoading"
    :data="data"
    :default-expanded-keys="[1,4,70]"
    node-key="id"
    :expand-on-click-node="false"
    :render-content="renderContent"
    @node-contextmenu="loadCodeDetail"
    draggable
    :allow-drop="allowDrop"
    >
  </el-tree>
</template>
<script>
export default {

method : {
	renderContent(h, { node, data, store }) {
          return (
            <span class="custom-tree-node">
              <input type="text" v-model={data.label} vOn:Keyup_stop_prevent_enter={()=> this.editDone(node, data)}/>
            </span>);
	}
	}
}
</script>

element.ui의 tree가 제공하는 기능을 사용하기 위해 쓰던 도중
@keyup.enter.native 이 막혀서 찾아보던 도중
vue.js의 JSX
Babel plugin 을 사용하기 때문에 이에 맞는 문법을 사용해야 함을 알게됨.

따라서 vue.js/jsx docs를 참고 하여 vOn:Keyup_stop_prevent_enter로 대체해야 함을 알게됨.

모냥이 좀 이상하긴 한데...
snake case와 camel case를 자동 변형 해주는 것 같다.

++ 더 알아봐야겠음.

profile
Curious for Everything

0개의 댓글