Question

晚上好-我正在使用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>

谢谢！

Answer 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();
    }
}

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

1 个答案: