Question

我尝试使用智能选择表单使v模型正常工作没有成功，并且通过组件源查看我无法找到智能选择值的保存位置。框架7-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)
  },
}

我错过了一些隐藏的字段，搞砸了我的实现，还是别的什么？我已经不得不找到未记录的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）字段不变。

我同意缺少文档。

可能的解决方案：

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

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

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

1 个答案: