使用 VUE 和 Bootstrap 返回第一个选项卡

Posted 2023-02-23

【中文标题】使用 VUE 和 Bootstrap 返回第一个选项卡

【英文标题】：Return to first Tab with VUE and Bootstrap

【发布时间】：2019-02-26 07:44:59

【问题描述】：

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

我有一个包含 2 个选项卡的 div。

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

当我想创建一个新记录时，我有一个名为 add-category 的选项卡，我可以选择并显示要添加的表单。

使用 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>

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>

谢谢！

【参考方案1】：

您可以通过 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();
          $('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();