Vue element UI tree, get node in method - vue.js

Question

How to get node data from custom methods (applySelected in my sample)?
I try to use getNode (from element ui guide), but not really understand, how its work. I would want to get 'markup' from current node.
I added custom button with applySelected method, with node.id parameter.
Element ui tree - http://element.eleme.io/#/en-US/component/tree
Method getNode - get node by data or key.
Possible, there must be more easy way to do that.
var Main = {
data() {
return {
data: [
{
id: 1,
label: 'Level one 1',
markup: '111',
children: [{
id: 4,
label: 'Level two 1-1',
markup: '112',
children: [{
id: 9,
label: 'Level three 1-1-1',
markup: '131'
}, {
id: 10,
label: 'Level three 1-1-2',
markup: '141'
}]
}]
}, {
id: 2,
label: 'Level one 2',
markup: '161',
children: [{
id: 5,
label: 'Level two 2-1',
markup: '117'
}, {
id: 6,
label: 'Level two 2-2',
markup: '118'
}]
}, {
id: 3,
label: 'Level one 3',
markup: '119',
children: [{
id: 7,
label: 'Level two 3-1',
markup: '211'
}, {
id: 8,
label: 'Level two 3-2',
markup: '177'
}]
}]
}
},
methods: {
handleNodeClick(data) {
console.log(data.markup);
},
applySelected(nodeid) {
console.log(nodeid);
//console.log(this.$refs.markupTree.getNode(nodeid));
console.log(this.$refs.markupTree.getNode(nodeid).markup);
console.log(this.$refs.markupTree.getCheckedNodes());
},
getCheckedNodes() {
console.log(this.$refs.markupTree.getCheckedNodes());
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.4.4/lib/theme-chalk/index.css");
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.el-tree-node__content {
height: 55px !important;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.4.11/lib/index.js"></script>
<div id="app">
<el-button #click="getCheckedNodes">get by node</el-button>
<div class="custom-tree-container">
<div class="block">
<el-tree
:data="data"
show-checkbox=""
node-key="id"
:expand-on-click-node="false"
ref="markupTree"
#node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="catname">
<el-input
v-model="node.label"
size="small"
:ref="'node'+ node.id"
></el-input>
</span>
<span class="catmarkup">
<el-input
placeholder="Please input"
v-model="data.markup"
size="small"
v-bind:name="data.input"
>
<template slot="append">%</template>
</el-input>
</span>
<el-button
icon="el-icon-check"
type="primary"
size="small"
v-on:click="applySelected(node.id)"
></el-button>
</span>
</el-tree>
</div>
</div>
</div>

Answer 1

The element.io "click" event handler already returns the clicked object, no need to specify a separate function for when the Tree emits an event. So you can use one function straight away:
Edit: I just see you're using a custom template with a button in it, in that case:
var Main = {
data() {
return {
data: [
{
id: 1,
label: 'Level one 1',
markup: '111',
children: [{
id: 4,
label: 'Level two 1-1',
markup: '112',
children: [{
id: 9,
label: 'Level three 1-1-1',
markup: '131'
}, {
id: 10,
label: 'Level three 1-1-2',
markup: '141'
}]
}]
}, {
id: 2,
label: 'Level one 2',
markup: '161',
children: [{
id: 5,
label: 'Level two 2-1',
markup: '117'
}, {
id: 6,
label: 'Level two 2-2',
markup: '118'
}]
}, {
id: 3,
label: 'Level one 3',
markup: '119',
children: [{
id: 7,
label: 'Level two 3-1',
markup: '211'
}, {
id: 8,
label: 'Level two 3-2',
markup: '177'
}]
}]
}
},
methods: {
nodeClickButton(nodeDataObj) {
console.log(nodeDataObj.markup);
},
getCheckedNodes() {
console.log(this.$refs.markupTree.getCheckedNodes());
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.4.4/lib/theme-chalk/index.css");
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.el-tree-node__content {
height: 55px !important;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.4.11/lib/index.js"></script>
<div id="app">
<el-button #click="getCheckedNodes">get by node</el-button>
<div class="custom-tree-container">
<div class="block">
<el-tree
:data="data"
show-checkbox=""
node-key="id"
:expand-on-click-node="false"
ref="markupTree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="catname">
<el-input
v-model="node.label"
size="small"
:ref="'node'+ node.id"
></el-input>
</span>
<span class="catmarkup">
<el-input
placeholder="Please input"
v-model="data.markup"
size="small"
v-bind:name="data.input"
>
<template slot="append">%</template>
</el-input>
</span>
<el-button
icon="el-icon-check"
type="primary"
size="small"
#click="nodeClickButton(data)"
></el-button>
</span>
</el-tree>
</div>
</div>
</div>