(Vue) Smart Select display names

Questions
1

Hi,

I am using the vue version of the smart select component. I managed to get options selected based on an external json. The only thing is that the selected names don’t show up in the item-after div. If I select them by hand they will show up.

<f7-list-item ref="tot" title="Timeoff Type Filter" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search types'}">

<select name="types" multiple @change="processTimeOffTypeFilter()">

  <option :selected="options.timeOffTypeFilter.value.includes('' + timeofftype.typeId)" v-for="timeofftype in timeofftypes" :key="timeofftype.typeId" :value="timeofftype.typeId">{{timeofftype.name}}</option>

</select>

</f7-list-item>

The @ Change is actually storing the array in my vue object:

  processTimeOffTypeFilter: function(){
    const self = this;
    self.options.timeOffTypeFilter.value = self.$refs.tot.f7SmartSelect.$selectEl.val();
  },

Am I using this correct and what to change to get the text values show up in the item-after div

Thanks in advance for your help.

Regards,

Peter

2

I changed my code a little but still no luck:

              <f7-list no-hairlines>
            <f7-list-item title="Filters" smart-select :smart-select-params="{openIn: 'popup'}">
              <select v-model="options.timeOffTypeFilter.value" multiple>
                  <option :selected="options.timeOffTypeFilter.value.includes(timeofftype.typeId)" v-for="timeofftype in timeofftypes" :key="timeofftype.typeId" :value="timeofftype.typeId">{{timeofftype.name}}</option>
              </select>
            </f7-list-item>        
          </f7-list>

I would expect these names: {{timeofftype.name}} displayed when the popup is closed… nothing is shown but when I open the popup I can see that there are items selected… what is going wrong?

3

If you loaded options asynchronously then you need force update smart select

<template>
  <f7-page class="page-home">
    ...

    <f7-list>
      <f7-list-item title="Item 1" smart-select ref="item">
        <select v-model="value" multiple>
          <option
            v-for="opt in options"
            :key="opt"
          >{{opt}}</option>
        </select>
      </f7-list-item>
    </f7-list>

    ...
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        value: [],
        options: [],
      }
    },
    mounted() {
      // emulate loading
      setTimeout(() => {
        // set options
        this.options = ['foo', 'bar', 'test'];
        // set value
        this.value = ['test'];
        // update smart select with same value when DOM updated
        this.$nextTick(() => {
          this.$refs.item.f7SmartSelect.setValue(['test']);
        });
      }, 3000);
    },
  };
</script>
4

You can set setValueText: false smart select parameter (https://framework7.io/docs/smart-select.html#smart-select-parameters) and just set text to item manually:

<template>
  <f7-page class="page-home">
    ...

    <f7-list>
      <f7-list-item
        title="Item 1"
        smart-select
        :smart-select-params="{setTextValue: false}"
        :after="textValue"
      >
        <select v-model="value" multiple>
          <option
            v-for="opt in options"
            :key="opt"
          >{{opt}}</option>
        </select>
      </f7-list-item>
    </f7-list>

    ...
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        value: [],
        options: [],
      }
    },
    computed: {
      textValue() {
        return this.value.join(', ');
      }
    },
    mounted() {
      // emulate loading
      setTimeout(() => {
        // set options
        this.options = ['foo', 'bar', 'test'];
        // set value
        this.value = ['test'];
      }, 3000);
    },
  };
</script>