我没有成功尝试使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
Prop 才能使收音机选择正常工作,所以如果我在这里也缺少任何东西,我不会感到惊讶。谢谢!
最佳答案
编辑:添加了一个可能的解决方案。见下文:
我有类似的东西
<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)
访问属性(更加轻松)不同之处在于我正在设置值,您可能可以通过这种方式获取值。