Question

当我单击单选按钮的所有3个部分时，单击它们时它们会随机重置。例如：如果我从单选按钮的第一部分中选择一个选项，则转到第二或第三部分并选择一个选项；清除所有先前选择的部分。为什么会这样呢？我怎样才能解决这个问题？下面是我如何实现单选按钮的代码段

<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-单选按钮无法正常工作

1 个答案: