单选列表项的 vuejs 模型答案

【问题标题】：vuejs Model for radio list item单选列表项的 vuejs 模型
【发布时间】：2017-07-06 08:41:58
【问题描述】：

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

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

上面的代码不起作用。

【问题讨论】：

你有错误吗？ method.val 必须在组件数据中定义为布尔值
“电台名称”属性中似乎还有一个空格。
@NathanWailes 该空间是有意的，如果遵循他的其余代码约定，应该在新行上命名

标签： vue.js html-framework-7

【解决方案1】：

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

您可以通过将input-value 属性添加到 f7-list-item 来修复它，如下所示：

<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 不能为空字符串。如果 this.inputValue 为空，则从 list-item.vue，valueComputed 回退到 this.value。

但是，该回退似乎不起作用，因为就像您所说（我也经历过），如果没有添加输入值，它不会更新 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>

【讨论】：