How to land on a specific tab using vuejs

Question

I want to go to a specific tab using vuejs and element-ui. Here is the jsfiddle file. https://jsfiddle.net/hutsu1zf/10/

By default it lands to first tab. How can I land on any other tab while page load event. I am new to vuejs so even some hints would be appreciated.

Possible duplicate of vue-router redirect to default path issue — c69
– c69, Commented Nov 15, 2017 at 7:03

Andrew Myers · Accepted Answer · 2017-12-08 17:27:23Z

5

You can use the activeName attribute of tab. Look at this fiddle:

https://jsfiddle.net/hutsu1zf/21/

Change activeName as per your requirement.

edited Dec 8, 2017 at 17:27

Andrew Myers

2,7865 gold badges36 silver badges42 bronze badges

answered Nov 15, 2017 at 7:37

DEV

2,2163 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user6748331 · Accepted Answer · 2017-11-15 07:41:22Z

1

Notice the value attribute in el-tabs and the name in el-tab-pane:

<el-tabs type="border-card" value="2">
  <el-tab-pane   id="tab-1" label="Route">
    Route
  </el-tab-pane>
  <el-tab-pane id="tab-0"  label="Config">
    Config
  </el-tab-pane>
  <el-tab-pane id="tab-2" name="2" label="Role">
    Role
  </el-tab-pane>
  <el-tab-pane id="tab-3" label="Task">
    Task
  </el-tab-pane>
</el-tabs>

answered Nov 15, 2017 at 7:41

user6748331

Collectives™ on Stack Overflow

How to land on a specific tab using vuejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related