将Framework7 + Vue的智能选择与v模型一起使用

Question

我尝试使v模型与智能选择表单正常工作未成功，但通过查看组件源，我根本找不到智能选择值的保存位置。 在显示如何以实际有用的方式使用framework7项方面，令人沮丧的缺少framework7-vue文档。

<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)
  },
}

我是否缺少一些隐藏的字段，是否弄乱了我的实现或其他东西？ 我已经必须找到未记录的input-value道具才能使收音机选择正常工作，所以如果我在这里也缺少任何东西，我不会感到惊讶。

谢谢！

Answer 1

编辑：添加了一个可能的解决方案。 见下文：

我有类似的东西

<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>

设备在组件外部进行了更新，以上更新了实际值（当您输入智能选择时，选择了正确的（新）值，但表示更新内容的列表项（.after-item）字段未更新改变。

我同意缺少文档。

---

可能的解决方案：

我在f7-list-item添加了:ref="id" ，然后可以使用this.$refs[id].f7SmartSelect.setValue(afterVal)访问属性（更加轻松） this.$refs[id].f7SmartSelect.setValue(afterVal)

不同之处在于我正在设置值，您可能可以通过这种方式获取值。