Twitter bootstrap 使用VUE和引导返回到第一个选项卡

晚上好-我正在使用VUE 2和Bootstrap 3

我有一个包含两个选项卡的div

从我有记录列表的第一个开始

当我想做一个新记录时，我有一个名为addcategory的选项卡，我选择它并显示要添加的表单

使用axios发出POST请求后，我需要返回到第一个选项卡

有人知道如何实现它吗？多谢各位

这是我的代码：

模板的一部分：

            <div class="nav-tabs-navigation">
                <div class="nav-tabs-wrapper">
                  <span class="nav-tabs-title">Options:</span>
                  <ul class="nav nav-tabs" data-tabs="tabs">
                      <li class="nav-item">
                      <a class="nav-link active" href="#categories" data-toggle="tab">
                          <i class="material-icons">bug_report</i> List
                          <div class="ripple-container"></div>
                      </a>
                      </li>
                      <li class="nav-item">
                      <a class="nav-link" href="#add-category" data-toggle="tab">
                          <i class="material-icons">code</i> Add
                          <div class="ripple-container"></div>
                      </a>
                      </li>
                  </ul>
                </div>
            </div>

选项：

选项卡内容

          <div class="tab-content">
              <div class="tab-pane active" id="categories">
                <table class="table table-hover">
                    <thead class="text-warning text-center">
                      <th>Name</th>
                      <th>Description</th>
                      <th>State</th>
                      <th>Options</th>
                    </thead>
                    <tbody>
                        <tr v-for="category in arrCategories" :key="category.id" class="text-center">
                            <td v-text="category.name">1</td>
                            <td v-text="category.description"></td>
                            <td>
                              <div v-if="category.condition">
                                Active
                              </div>
                              <div v-else>
                                Inactive
                              </div>
                            </td>
                            <td class="td-actions text-center">
                            <button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
                                <i class="material-icons">edit</i>
                            </button>
                            <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                                <i class="material-icons">close</i>
                            </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
              </div>
              <div class="tab-pane" id="add-category">
                <form>
                  <div class="row">
                    <div class="col-md-10">
                      <div class="form-group">
                        <label class="bmd-label-floating">name</label>
                        <input type="text" class="form-control" v-model="name">
                      </div>
                    </div>
                    <div class="col-md-10">
                      <div class="form-group">
                        <label class="bmd-label-floating">Description</label>
                        <input type="text" class="form-control" v-model="description">
                      </div>
                    </div>
                  </div>

                    <button v-show="name" type="submit" v-if="type =='save'" class="btn btn-primary pull-right" @click.prevent="addCategory()">
                      Add</button>
                    <button type="submit" v-if="type !='save'" class="btn btn-primary pull-right">Edit</button>

                  <div class="clearfix"></div>
                </form>
              </div>
          </div>

名称
描述
陈述
选择权
1.
活跃的
不活跃的
编辑
关闭
名称
描述
添加
编辑

JS-VUE

<script>
    export default {
      data(){
        return{
          name:'',
          description:'',
          type:'save',
          arrCategories:[]
        }
      },
      methods:{
        getCategories(){
          axios.get('/categories')
            .then( response => {
              this.arrCategories = response.data;
            })
            .catch(function (error) {
              console.log(error);
            })
        },
        addCategory(){
          axios.post('/category/new', { 'name': this.name, 'description': this.description })
            .then( response => {
              this.name ='',
              this.description ='',
              this.getCategories();
          })
        },
      },
        mounted() {
            this.getCategories();
        }
    }
</script>

   <script>
export default {
  data(){
    return{
      name:'',
      description:'',
      type:'save',
      arrCategories:[]
    }
  },
  methods:{
    getCategories(){
      axios.get('/categories')
        .then( response => {
          this.arrCategories = response.data;
        })
        .catch(function (error) {
          console.log(error);
        })
    },
    addCategory(){
      axios.post('/category/new', { 'name': this.name, 'description': this.description })
        .then( response => {
          this.name ='',
          this.description ='',
          this.getCategories();
          $('ul.nav-tabs li:nth-child(1)').click();   // Add this line code //
          $('ul.nav-tabs li:nth-child(1) a').click();   // Or Add this line code //
      })
    },
  },
    mounted() {
        this.getCategories();
    }
}

导出默认值{
数据（）{
返回{
名称：“”，
说明：“”，
类型：'save'，
类别：[]
}
},
方法：{
getCategories（）{
axios.get（“/categories”）
。然后（响应=>{
this.arrcegories=response.data；
})
.catch（函数（错误）{
console.log（错误）；
})
},
addCategory（）{
post（'/category/new'，{'name'：this.name，'description'：this.description}）
。然后（响应=>{
this.name=''，
this.description=''，
这个.getCategories（）；
})
},
},
安装的（）{
这个.getCategories（）；
}
}

---

谢谢

您可以通过jquery来处理它，所以触发第一个列表以通过jquery选择器单击

JS-VUE

<script>
    export default {
      data(){
        return{
          name:'',
          description:'',
          type:'save',
          arrCategories:[]
        }
      },
      methods:{
        getCategories(){
          axios.get('/categories')
            .then( response => {
              this.arrCategories = response.data;
            })
            .catch(function (error) {
              console.log(error);
            })
        },
        addCategory(){
          axios.post('/category/new', { 'name': this.name, 'description': this.description })
            .then( response => {
              this.name ='',
              this.description ='',
              this.getCategories();
          })
        },
      },
        mounted() {
            this.getCategories();
        }
    }
</script>

   <script>
export default {
  data(){
    return{
      name:'',
      description:'',
      type:'save',
      arrCategories:[]
    }
  },
  methods:{
    getCategories(){
      axios.get('/categories')
        .then( response => {
          this.arrCategories = response.data;
        })
        .catch(function (error) {
          console.log(error);
        })
    },
    addCategory(){
      axios.post('/category/new', { 'name': this.name, 'description': this.description })
        .then( response => {
          this.name ='',
          this.description ='',
          this.getCategories();
          $('ul.nav-tabs li:nth-child(1)').click();   // Add this line code //
          $('ul.nav-tabs li:nth-child(1) a').click();   // Or Add this line code //
      })
    },
  },
    mounted() {
        this.getCategories();
    }
}

导出默认值{
数据（）{
返回{
名称：“”，
说明：“”，
类型：'save'，
类别：[]
}
},
方法：{
getCategories（）{
axios.get（“/categories”）
。然后（响应=>{
this.arrcegories=response.data；
})
.catch（函数（错误）{
console.log（错误）；
})
},
addCategory（）{
post（'/category/new'，{'name'：this.name，'description'：this.description}）
。然后（响应=>{
this.name=''，
this.description=''，
这个.getCategories（）；
$（'ul.nav-tabs li:n子项（1）'）。单击（）；//添加此行代码//
$（'ul.nav-tabs li:nth child（1）a'）。单击（）；//或添加此行代码//
})
},
},
安装的（）{
这个.getCategories（）；
}
}