Using Framework7+Vue's smart-select with a v-model

Question

I've tried unsuccessfully to get a v-model to work correctly with the smart-select form, and looking through the component source I can't find where the smart-select value is being saved at all. The framework7-vue docs are frustratingly lacking in terms of showing how to use the framework7 items in an actually useful way.

<f7-list form>
  <f7-list-item smart-select smart-select-searchbar 
    title="Ladders" smart-select-open-in="popup"
    v-model="selectedLadders" v-on:change="console.log('onChange')" v-on:input="console.log('onInput')">
    <select name="ladders" multiple="multiple" >
      <option v-for="ladder in LadderConfigs" :key="ladder.key" :value="ladder.key" :input-value="ladder.key">{{ladder.name}}</option>
    </select>
  </f7-list-item>
</f7-list>

 ...

watch: {
  selectedLadders(new) {
    console.log("ladders changed:", new)
  },
}

Am I missing some hidden field, messed up my implementation, or something else? I already had to find the un-documented input-value prop for the radio select to work, so I wouldn't be surprised if I'm missing something here too.

Thanks!

Answer 1

EDIT: Added a possible solution. See below:

I have something similar...

<template>
  <ul
    v-if="device.control && device.control.indexOf('effect') !== -1 && device.effects && device.effects.length > 0">
    <f7-list-item
      smart-select
      :smart-select-params="{closeOnSelect: true}"
      title="Effect">
      <select name="effect" v-model="currentEffect" v-on:change="saveChange">
        <option value="*Solid*">Solid Color</option>
        <option v-for="effect in device.effects" :value="effect">
          {{ effect }}
        </option>
      </select>
    </f7-list-item>
  </ul>
</template>

<script>
  import F7ListItem from 'framework7-vue/src/components/list-item'

  export default {
    name: 'change-effect',
    components: {F7ListItem},
    props: ['device', 'update'],
    data() {
      return {
        title: 'Change Effect',
        currentEffect: this.device.effect
      };
    },
    methods: {
      saveChange () {
        this.update([this.device._id, {effect: this.currentEffect}])
      }
    },
    watch: {
      '$props': {
        handler: function (val, oldVal) {
          console.log('watch', val.device.effect)
          this.currentEffect = val.device.effect
        },
        deep: true
      }
    }
  }
</script>

The device is updated outside the component, this above updates the actual value (when you enter the smart select, the right (new) value is selected, but the list item (.after-item) field that says what is updated isn't changed.

I agree the docs are lacking.

---

Possible Solution:

I added a :ref="id" to the f7-list-item and then was able to access the properties (with a lot more ease) with this.$refs[id].f7SmartSelect.setValue(afterVal)

The different is I was setting the value, you might be able to get the value this way.