vuejs无线电列表项目的模型

问题描述 投票:2回答:2

如何为framework7-vue单选列表项元素设置v模型?

Checkboxes & Radios Vue Component

  <f7-list-item 
    radio 
    name="my-radio" 
    v-model="method.val" 
    value="ISNA" 
    title="Islamic Society of North America" 
    subtitle="ISNA" 
    text="North America (US and Canada)">
  </f7-list-item>

上面的代码不起作用。

vue.js html-framework-7
2个回答
2
投票

根据this github exchange,问题是未记录的功能问题

您可以通过向f7-list-item添加input-value属性来修复它,如下所示:

<f7-list-item 
  radio 
  name="my-radio" 
  v-model="method.val" 
  value="ISNA"
  input-value="ISNA"
  title="Islamic Society of North America" 
  subtitle="ISNA" 
  text="North America (US and Canada)">
</f7-list-item>

但请记住,这些警告:

input-value不能为空字符串。如果valueComputed为空,则从list-item.vue,this.value回退到this.inputValue

但是,这种后备似乎不起作用,因为,就像你说的那样(我也经历过),如果没有添加输入值,它不会更新v-model。 TLDR;确保input-value不是空字符串,否则会破坏。


2
投票

@ mix3d的答案适用于单选按钮,但由于这个主题缺少文档,我将明确并添加此示例。对于复选框列表项,将input-value设置为您喜欢的布尔值作为字符串,并使用v-model将其绑定到data中对应的javascript布尔值:

<template>
    <f7-list form>
        <f7-list-item checkbox name="friends" input-value="true" title="Friends" v-model="settings.friends"></f7-list-item>
    </f7-list>
</template>

<script>
    export default {
        data() {
            return {
                settings: {
                    friends: true
                }
            }
        }
    }
</script>
© www.soinside.com 2019 - 2024. All rights reserved.