Question

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

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

上述代码不起作用。

Answer 1

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

但请记住，这些警告：

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

然而，这种后备似乎不起作用，因为，就像你说的那样（我也经历过），如果没有添加输入值，它不会更新v-model。 TLDR;确保输入值不是空字符串，否则事情就会中断。

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

vuejs无线电列表项目的模型

2 个答案: