<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를 자동 변형 해주는 것 같다.
++ 더 알아봐야겠음.