f7-单选按钮无法正常工作

Question

当我点击所有 3 个单选按钮部分时，它们会随机重置。例如：如果我从单选按钮的第一部分选择一个选项，然后转到第 2 或 3 部分并 select 一个选项；所有以前的 selected 部分都被清除。为什么会这样？我怎样才能解决这个问题？下面是我如何实现单选按钮的代码片段

<f7-list-item media-list :value="event.section1" >
        <f7-label>Section 1 </f7-label>    
        <f7-radio class="Yes" name="radio1" value="Yes" title="Yes" @change="event.section1 = $event.target.value">Yes</f7-radio>
        <f7-radio class="No" name="radio1" value="No" title="No" @change="event.section1 = $event.target.value">No</f7-radio>
</f7-list-item>
<f7-list-item media-list :value="event.section2" >
        <f7-label>Section 2 </f7-label>    
        <f7-radio class="Mild" name="radio2" value="Mild" title="Mild" @change="event.section2= $event.target.value">Mild</f7-radio>
        <f7-radio class="Moderate" name="radio2" value="Moderate" title="Moderate" @change="event.section2= $event.target.value">Moderate</f7-radio>
        <f7-radio class="Severe" name="radio2" value="Severe" title="Severe" @change="event.section2= $event.target.value">Severe</f7-radio>
</f7-list-item>
<f7-list-item media-list :value="event.section3" >
        <f7-label>Section 3 </f7-label>      
        <f7-radio class="Mild" name="radio3" value="Mild" title="Mild" @change="event.section3 = $event.target.value">Mild</f7-radio>
        <f7-radio class="Moderate" name="radio3" value="Moderate" title="Moderate" @change="event.section3 = $event.target.value">Moderate</f7-radio>
        <f7-radio class="Severe" name="radio3" value="Severe" title="Severe" @change="event.section3 = $event.target.value">Severe</f7-radio>
</f7-list-item>

Answer 1

当您使用 F7 和 vue 构建单选按钮列表时，请改用 f7-list 和 f7-list-item。

组示例：

   <f7-block-title>Section 1</f7-block-title>
    <f7-list>
      <f7-list-item radio value="Yes" name="radio1" checked title="...."></f7-list-item>
      <f7-list-item radio value="No" name="radio1" title="...."></f7-list-item>
    </f7-list>

更新

如果你想要圆形收音机的风格，你可以使用这样的东西（没有 f7-list-item :

<f7-block-title>Section 1</f7-block-title>
<f7-block>
    <f7-radio value="Yes" name="radio1"></f7-radio>
    <f7-radio value="No" name="radio1"></f7-radio>
</f7-block>

Check the docs 了解更多信息

f7-单选按钮无法正常工作

f7-Radio Buttons not working properly

html

javascript

vue.js

html-framework-7