Kitchen-sink with vuejs how to load data - new to f7 and vuejs

I am running the kitchen-sink with vuejs and trying to load data from the vuejs data() element to a picker. I understand it is not available in the setup → onPageInit as the page is not created fully. What is the easy way to do it.

In the code below I am trying to load the picker from the data element organization (which maybe loaded from a rest service later). What is the best way to do this?

  <f7-page class="page-home" @page:afterin="onPageAfterIn" @page:beforeremove="onPageBeforeRemove"
    @page:init="onPageInit">
    <f7-navbar large transparent :sliding="false">
<! code removed for brevity -->
    </f7-navbar>
    <f7-block class="top-gap">
      <div class="block-title">Organization</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input id="demo-picker-device" type="text" placeholder="Select Organization" readonly="readonly" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </f7-block>
    <f7-block>
      <f7-row v-for="rowIcons in icons" :key="rowIcons">
        <f7-col v-for="icon in rowIcons" :key="icon">
          <div>
          <f7-icon v-if="icon.icon" :f7="icon.icon"></f7-icon>
          <div v-if="icon.text">{{ icon.text }}</div>
        </div>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script>
import {
  f7Page,
  f7Navbar,
  f7NavLeft,
  f7NavRight,
  f7Link,
  f7Searchbar,
  f7Icon,
  f7Block,
  f7Row,
  f7Col,
  theme,
  f7,
} from 'framework7-vue';
import { onMounted } from 'vue';

export default {
  name: 'Home',
  components: {
    f7Page,
    f7Navbar,
    f7NavLeft,
    f7NavRight,
    f7Link,
    f7Searchbar,
    f7Icon,
    f7Block,
    f7Row,
    f7Col
  },
  props: {
    f7router: Object,
  },
  methods: {
  },
  data() {
    return {
      icons:
      [
        [
          {'icon':'calendar', 'text':'Calendar'},
          {'icon':'person_2', 'text':'Contact'},
          {'icon':'briefcase_fill', 'text':'Account'}
        ],
        [
          {'icon':'rectangle_stack_fill_badge_plus', 'text':'Opportunities'},
          {'icon':'person_circle_fill', 'text':'Campaign'},
          {'icon':'clock', 'text':'Timesheet'}
        ],
        [
        {'icon':'money_dollar', 'text':'Expenses'},
        {'icon':'checkmark', 'text':'Task'},
        {'icon':'rectangle_on_rectangle_angled', 'text':'Notes'}
        ],
        [
          {'icon':'ant_circle', 'text':'Notes'},
          {'icon':'', 'text':''},
          {'icon':'', 'text':''}
        ]
      ],
      organizations:
      [
        'Test Work',
        'Test Team',
        'DK Org',
        'KNR Org'
      ]
    }
  },
  // eslint-disable-next-line
  setup({ f7router }) {

    const onResize = () => {
      const $el = f7.$('.page-home');
      if (f7.width >= 768) {
        $el.find('.list:not(.searchbar-not-found)').addClass('menu-list');
      } else {
        $el.find('.list:not(.searchbar-not-found)').removeClass('menu-list');
      }
    };

    const onPageInit = () => { 
      const self = this;
      // iOS Device picker 
      self.pickerDevice = f7.picker.create({
        inputEl: '#demo-picker-device',
        cols: [
          {
            textAlign: 'center',
            values: [
              'Test Work',
              'Test Team',
              'DK Org',
            ],
          },
        ],
      });
    };

    const onPageBeforeRemove = () => {
      const self = this;
      self.pickerDevice.destroy();
    };

    const onPageAfterIn = () => {
      if (!theme.aurora) return;
      if (f7.width >= 768) {
        f7router.navigate('/about/', { reloadDetail: true });
      }
    };

    onMounted(() => {
      if (theme.aurora) {
        const $el = f7.$('.page-home');
        onResize();

        f7.on('resize', onResize);

        f7router.on('routeChange', (route) => {
          const url = route.url;
          if (!$el) return;
          const $linkEl = $el.find(`a[href="${url}"]`);
          if (!$linkEl.length) return;
          $el.find('.item-selected').removeClass('item-selected');
          $linkEl.addClass('item-selected');
        });
      }
    });
    return {
      theme,
      onPageAfterIn,
      onPageInit,
      onPageBeforeRemove
    };
  },
};
</script>

here => long-water-uvqzwq - CodeSandbox

Thanks your solution works. My issue is that I want to load the json in a variable in data() and then use it in the onPageInit().

i’m not a vue guy, but i think you can’t do that.
data() (and setup()) is sync function.

you can do something like this => [picker init] long-water-uvqzwq - CodeSandbox

Thanks a lot I am thinking of writing it using the vue composition api to make it to work. You provided a good starting point.

using option api => [picker opt] long-water-uvqzwq - CodeSandbox