f7-單選按鈕無法正常工作

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>

UPDATE

如果您想使用圓形收音機的樣式，則可以使用類似以下內容（不帶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>

檢查文檔以獲取更多信息