Trying out F7 Vue

Questions
1

I’ve decided to have a play with F7 Vue and wanted to make a simple virtual list and detail view. I’m having trouble getting my head around the data scope for routes…
Building on the virtual list, why can I not get the items array out into the correct scope?

app.js

Vue.use(Framework7Vue, Framework7)
Vue.component('feed', {
  template: '#feed'
});
Vue.component('detail', {
  template: '#detail'
});
new Vue({
  el: '#app',
  framework7: {
    root: '#app',
    name: 'Framework7',
    theme: 'auto',
    routes: [
      {
        path: '/',
        component: 'feed',
        data: function () {
          var items = [];
          for (var i = 1; i <= 10000; i++) {
            items.push({
              title: 'Item ' + i,
              subtitle: 'Subtitle ' + i
            });
          }
          return {
            items: items,
            vlData: {},
          };
        },
        methods: {
          searchAll: function (query, items) {
            var found = [];
            for (var i = 0; i < items.length; i += 1) {
                if (items[i].title.toLowerCase().indexOf(query) >= 0 || query.trim() === '') found.push(i);
            }
            return found;
          },
          renderExternal(vl, vlData) {
            this.vlData = vlData;
          },
        },
      },
      {
        path: '/detail/foo/:foo/bar/:bar/',
        component: 'detail'
      },
    ],
  }
});

index.html

<div id="app">
  <f7-view id="main-view" main></f7-view>
</div>

<template id="feed">
  <f7-page>
    <f7-navbar back-link="Back" title="Virtual List"></f7-navbar>
    <f7-searchbar
      search-container="#search-list"
      search-item="li"
      search-in=".item-title"
    ></f7-searchbar>
    <f7-list class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>
    <f7-list
      id="search-list"
      class="searchbar-found"
      media-list
      virtual-list
      :virtual-list-params="{ items: items, height: 63, searchAll: searchAll, renderExternal: renderExternal }"
      >
      <ul>
        <f7-list-item
          v-for="(item, index) in vlData.items"
          :key="index"
          media-item
          link="#"
          :title="item.title"
          :subtitle="item.subtitle"
          :style="`top: ${vlData.topPosition}px`"
        ></f7-list-item>
      </ul>
    </f7-list>
  </f7-page>
</template>

<template id="detail">
  <f7-page>
    <f7-navbar title="About" back-link="Back"></f7-navbar>
    <f7-block-title>Detail</f7-block-title>
    <f7-block strong>
      <!-- {{$f7route.foo}} -->
      <!-- {{$f7route.bar}} -->
    </f7-block>
  </f7-page>
</template>
2

I figured it out… I needed to have the data and methods in Vue.component().

Vue.component('feed', {
  template: '#feed',
  data: function () {
    const data = this.$f7router.app.data;
    return {
      items: data.items,
      vlData: {},
    };
  },
  methods: {
    ...
  },
});
1 Like
3

@nolimits4web Just wondering if there is a reason why the F7 Vue template doesn’t install the latest version of Framework7 when you run npm install? Is it not compatible with the latest version?

4

It is compatible, it is not latest because it is not necessary to update there and/or sometimes I don’t have enough time for this. Just update to latest manually

5

By specifying latest versions in package.json