Vue.js 将Framework7+Vue的智能选择与v型模型结合使用

我尝试使v型模型与smart select表单正确配合使用，但未成功，查看组件源代码时，我根本找不到smart select值的保存位置。令人沮丧的是，framework7 vue文档缺乏展示如何以实际有用的方式使用framework7项的内容

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

我是否遗漏了一些隐藏字段，将实现搞砸了，或者其他什么？我已经找到了未记录的输入值道具，收音机选择才能工作，所以如果我在这里也遗漏了一些东西，我也不会感到惊讶

---

谢谢

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

我有类似的东西

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

设备在组件外部更新，当您输入smart select时，上面的更新会更新实际值，选择正确的新值，但列表项。显示更新内容的after item字段不会更改

我同意缺少文件

可能的解决办法：

我在f7列表项中添加了：ref=id，然后可以更轻松地访问属性。$refs[id]。f7SmartSelect.setValueafterVal

---

不同的是我正在设置值，您可能可以通过这种方式获得值。

这是一个答案还是一个“我也是”的加法？不太明白。@mix3d最初也是一个me，但现在我有了答案，只是还没有弄清楚如何进行编辑。