Ian
Ian

Reputation: 354

How to get key value in tab (element-ui)?

How I could get the key value while clicking each tab? I can use obj.label to get label, but cannot use obj.key to get key. How? Code below is for the information.

<el-tabs tab-position="left" @tab-click="handleClick">
  <el-tab-pane v-for="u in planner" :label="u.name" :key="u.id" >&nbsp;</el-tab-pane>
</el-tabs>

handleClick(obj, e) {
  console.log(obj.label)  
  console.log(obj.key)  
},

Upvotes: 3

Views: 5160

Answers (2)

Jigar
Jigar

Reputation: 3261

You need to replace your line with this obj.$vnode.key in your code to access your key value.

Just replace your code like this, it will work.

<el-tabs tab-position="left" @tab-click="handleClick">
  <el-tab-pane v-for="u in planner" :label="u.name" :key="u.id" >&nbsp;</el-tab-pane>
</el-tabs>

handleClick(obj, e) {
  console.log(obj.label)  
  console.log(obj.$vnode.key)  
},

Here is a working example.

Upvotes: 4

Riddhi
Riddhi

Reputation: 2244

key is a special attribute in Vue. You should rename your property to something else.

Or else if you need to use that only than => this.$vnode.key

Upvotes: 0

Related Questions