vue.js - 单选列表项的vuejs模型

Question

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

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>

上面的代码不起作用。

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>

但是请记住这些注意事项:

input-value can not be empty string. From list-item.vue, valueComputed fallbacks to this.value if this.inputValue is empty.

但是，该回退似乎不起作用，因为正如您所说(我也有过这样的经历)，如果没有添加输入值，它不会更新 v-model。所以 TLDR；确保输入值不是空字符串，否则会出错。