Set multiplevalues smart select - datapioneers

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.5.3/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.5.3/css/framework7.bundle.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.5.3/css/framework7.bundle.min.css">
<div id="app">
    <div class="panel panel-left panel-cover panel-resizable panel-init">
      <div class="page">
        <div class="page-content">
          <div class="block-title">Left Panel</div>
          <div class="block">
            <p>This is a left side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="panel-open">Right Panel</a></p>
          </div>
          <div class="block-title">Main View Navigation</div>
          <div class="list links-list">
            <ul>
              <li>
                <a href="/multiple-smart-select/" class="panel-close">multiple-smart-select</a>
              </li>
            </ul>
          </div>
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel,...

JavaScript

// Dom7
var $$ = Dom7;

// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
  theme = document.location.search.split('theme=')[1].split('&')[0];
}


// Init App
var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  data: function() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  methods: {
    helloWorld: function() {
      app.dialog.alert('Hello World!');
    },
  },
  routes: [ // Index page
    {
      path: '/',
      name: 'home',
    },
    {
      path: '/multiple-smart-select/',
      // Component Object
      component: {
        template: `
<div class="page page-settings">
    <div class="page-content">
	  <form id="settings-form">
	    <div class="list no-hairlines-md">
      <ul>
      
      
      <li>
        <!-- Additional "smart-select" class -->
        <a href="#" required class="item-link smart-select smart-city smart-select-init" data-open-in="sheet">
        <select name="city" multiple required>
        <option value = ''>Select one</option>
        {{#each city}}
        <option value="{{this.name}}">{{this.name}}</option>
        {{/each}}
        </select>
        <div class="item-content">
        <div class="item-inner">
        <!-- Select label -->
        <div class="item-title">Select City</div>
        <!-- Selected value, not required -->
        <div class="item-after"></div>
        </div>
        </div>
        </a>
		</li>
      </ul>
      <button class='button button-fill' @click.prevent='validateFrm'> Validate form </button>
		</div>
	  </form>
	</div>
  </div>
      `,
        data: function() {
          return {
            title: 'Component Page',
            city: [],
          }
        },
        methods: {
          validateFrm() {
          alert('Form is valid?: ' + this.$f7.input.validateInputs('.settings-form'))
          }
        },
        on: {
          pageBeforeIn() {
          ...