Framework7-Vue Starter

by Maiki Nahara

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-title>My App</f7-nav-title>
        </f7-navbar>
        selectedOptions:{{selectedOptions}}
        <f7-list>
          <f7-list-item
            class="smart-select-with-checkbox"
            title="Letters"
            smart-select
            :value="selectedOptions"
          >
            <select multiple @change="UpdateValues" ref='mySelect'>
              <option v-for="(Item, Index) in options"
              :value="Item.value"
              :selected="selectedOptions.includes(Item.value)"
              >{{Item.name}}</option>
            </select>
            <f7-checkbox slot="root"></f7-checkbox>
          </f7-list-item>
        </f7-list>
        
      </f7-page>
    </f7-view>
  </f7-app>
</div>

CSS

.smart-select-with-checkbox .checkbox {
  position: absolute;
  top: 50%;
  margin-top: calc(-1 * var(--f7-checkbox-size) / 2);
  left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
}
.smart-select-with-checkbox .item-inner {
  margin-left: calc(var(--f7-checkbox-size) + 15px);
}

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue)


// Init App
new Vue({
  el: '#app',
  data() {
  	return {
		  // Framework7 params here
    	f7params: {
      	root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
      },
      selectedOptions: ['a', 'b'],
      options: [
      {name:'A', value:'a'},
      {name:'B', value:'b'},
      {name:'C', value:'c'},
      ]
    }
  },
  methods: {
    UpdateValues($Event) {
    let selectedOptions = $Event.target.selectedOptions;
        let newValues = [];
        for (let Index in selectedOptions) {
          if (selectedOptions.hasOwnProperty(Index)) {
            newValues.push(selectedOptions[Index]['value'])
          }
        }
        this.selectedOptions = newValues;
    }
  },
  mounted () {
  	setTimeout(() => {
    	this.selectedOptions = []
      this.$refs.mySelect.selectedOptions = []
      this.$nextTick(() => { this.Dom7(this.$refs.mySelect).change() })
    }, 3000)
  }
});