window.f7 undefined in app.vue

[ching2018]

new Vue({
  el: '#app',
  template: '<app/>',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    /* Uncomment to enable Material theme: */
    // material: true,
    routes: Routes,
  },
  // Register App Component
  components: {
    app: App
  }
});

Can i use the window.f7 in app.vue?
I want to define this app.vue as my home page,thank you.

[BelinChung]

Please use this.$f7 instead of window.f7.

[ching2018]

Uncaught TypeError: Cannot read property '$7' of undefined

[BelinChung]

额，你还没有理解 this 的含义，this.$f7 和 this.$$ 是挂载在 Vue 实例上的。

[ching2018]

还请指点~

[ching2018]

另外，如果我有一个common.js，里面应该怎么调用$$和window.f7呢？可能是需要在framewor7未初始化的情况下引入改js的

[BelinChung]

framework7 初始化后，通过 window.f7 和 this.$f7 都可以访问到 f7 实例。这个 this 是 vue 实例的 this，所以你得在 vue 组件里面用 this。

只要 import 了 framework7，window 变量下面就会挂载几个全局方法，这个你可以通过打印 console.log(window) 来查看到底哪些方法是可用的

比如未初始化时，window.Framework7、window.Dom7、window.Template7 可用。

先自己多尝试吧。你的核心问题是为什么 window.f7 没有，那你解决问题的思路应该是打印 window 变量，看里面到底有哪些鬼东西可以用，你一打印 window 变量，自然你所有的疑问都消失了。

[ching2018]

谢谢您的指导受益匪浅

[ching2018]

还想请教一下~

                            //导航
                            for (var i = 0; i < rs.data.banners.length; i++) {
                                homeIndexVue.banners.push(rs.data.banners[i]);
                            }
                            Vue.nextTick(function() { //异步更新队列
                                console.log(homeIndexVue.banners);
                                new Swiper('.banner', {
                                    pagination: '.swiper-pagination',
                                    loop: true,
                                    autoplay: 3000,
                                });

                            });

在这里面，banners是已经增加了元素的，但是页面无法渲染出swiper的效果，只显示一张图片。请问如何解决呢~

[ching2018]

解决啦~

                            Promise.resolve().then(function() {
                                //导航
                                for (var i = 0; i < rs.data.banners.length; i++) {
                                    homeIndexVue.banners.push(rs.data.banners[i]);
                                }
                            }).then(function() {
                                new Swiper('.banner', {
                                    pagination: '.swiper-pagination',
                                    loop: true,
                                    autoplay: 3000,
                                });
                            }).catch(function(err) {
                                myApp.alert(err);
                            });

[BelinChung]

没有问题的话，记得把 issue 关闭下，方便后来的人翻阅知道问题已解决。