Question

当我在vue js中使用materialize选项卡进行设计时1.第一次加载页面时它不起作用。重新加载页面后它完美运行。我在准备好的功能中使用了$('ul.tabs').tabs();功能。下面是第一次加载时页面的屏幕截图。

`<ul class="tabs tabs-fixed-width white z-depth-2">
                                                  <li class="tab left-tab"><a href="#testimonial_list" class="active black-text bolder font-1-5x">View Testimonials</a></li>
                                                  <li class="tab right-tab"><a class="black-text bolder font-1-5x" href="#create_testimonial">Create Testimonial</a></li>
                                                  <li class="indicator brand-color"></li>
                                            </ul>`

---这是我的HTML

` 从'../ Sidepanel.vue'导入补充工具栏;

  Vue.directive('chosen', {
        twoWay: true, // note the two-way binding
        bind: function () {
              $(this.el)
                  .chosen({
                        width: '100%'
                  })
                  .change(function (ev) {
                        var i, len, option, ref;
                        var values = [];
                        ref = this.el.selectedOptions;
                        for (i = 0, len = ref.length; i < len; i++) {
                              option = ref[i];
                              values.push(option.value)
                        }
                        this.set(values);
                  }.bind(this));
        },
        update: function (nv, ov) {
              // note that we have to notify chosen about update
              $(this.el).trigger("chosen:updated");
        }
  });


  export default {
        components: {
              'header-component': Sidebar
        },
        data: function () {
              return {
                    loader: '<div class="loading full-width full-height fixed top-off left-off row"><div class="progress cyan auto top-25x col s12 m3 float"><div class="indeterminate"></div></div><h5 class="black-text top-25x center-align relative black-text">Processing..</h5></div>',
                    response: {
                          edit : false,
                          _token: $('meta[name=csrf_token]').attr('content'),
                          passage_details:{
                          }
                    }
              }
        },
        ready: function () {
              let vm = this;
              window.document.title = "Testimonials";
              $('ul.tabs').tabs();
              $(".chosen-select").chosen({width: '100%'});
        },
        computed:{
        },
        methods: {
        }
  }

`

----这是我的剧本

实现$（'ul.tabs'）。tabs（）;不在vue 1中工作

0 个答案: