vue中怎么處理多個單選框，且單選框互不影響的方案

項目需求是：需要提交多個老師的信息，信息中包含老師的職位，職位是單選框；

難點是：怎么確保多個單選框不沖突，單選框怎么用v-for遍歷出來；

最終效果是：

 

 

 1、首先最外層先通過數組遍歷出來，數組結構需要加上老師名稱和手機號，便於保存，具體結構如下：

teacherList: [
        { name: '一', role: 1, teacherName: '', phone: null },
        { name: '二', role: 1, teacherName: '', phone: null },
        { name: '三', role: 1, teacherName: '', phone: null }
      ]

解釋一下：name是用來顯示是第幾位老師，role默認值為1，是職位默認為主管，后面的name和phone是用來保存每個老師的信息；

　　　　<div>
          <img class="teacher-img" src="../../common/image/teacher.png" alt="">
          <span class="teacher-title">第{{item.name}}位輔導老師</span>
        </div>
        <div>
            <input v-model="item.teacherName" class="teacher-name" type="text" maxlength="8" placeholder="請輸入輔導老師的姓名">
        </div>
        <div>
            <input  type="number" v-model="item.phone" pattern="[0-9]*"  class="teacher-name" placeholder="請輸入輔導老師的手機號">
        </div>

2、遍歷單選框的職位，注意用teacherList中的role保存每個老師選擇的職位，這樣才不會出現沖突；

單選框的數組結構如下：

positionList: [
        { name: 'AI主管', role: 1 },
        { name: 'AI輔導老師', role: 2 }
      ]

html代碼如下：

<label class="select-label" :class="{'mr': index == 0}" v-for="(_item, index ) in positionList" :key="_item.role">
            <img v-if='item.role == _item.role ' class="select-radio" src="../../common/image/select2.png" alt="">
            <img v-else class="select-radio" src="../../common/image/select1.png" alt="">
            <input @click="selectPosition(_index, _item.role)" type="radio" name="radios" :value="_item.role">
            <span>{{_item.name}}</span>
          </label>

解釋一下：v-if是判斷teacherList中的role和positionList中的role是否一致，顯示選中/未選中效果，每次點擊input單選框后，將當前的role賦值給teacherList中的role保存；

完整代碼如下：

<div class="teacher" v-for="(item, _index) in teacherList" :key="_index">
        <div>
          <img class="teacher-img" src="../../common/image/teacher.png" alt="">
          <span class="teacher-title">第{{item.name}}位輔導老師</span>
        </div>
        <div>
            <input v-model="item.teacherName" class="teacher-name" type="text" maxlength="8" placeholder="請輸入輔導老師的姓名">
        </div>
        <div>
            <input  type="number" v-model="item.phone" pattern="[0-9]*"  class="teacher-name" placeholder="請輸入輔導老師的手機號">
        </div>
        <p class="teacher-select-title">請選擇輔導老師職位</p>
        <div class="teacher-select">
          <label class="select-label" :class="{'mr': index == 0}" v-for="(_item, index ) in positionList" :key="_item.role">
            <img v-if='item.role == _item.role ' class="select-radio" src="../../common/image/select2.png" alt="">
            <img v-else class="select-radio" src="../../common/image/select1.png" alt="">
            <input @click="selectPosition(_index, _item.role)" type="radio" name="radios" :value="_item.role">
            <span>{{_item.name}}</span>
          </label>
        </div>
      </div>

js賦值代碼如下：

selectPosition (index, role) {
      this.teacherList[index].role = role
    },

最后再從positionList中將需要的數據提取出來即可；

注意：如果需求是不必填寫所有老師，有至少一個信息完成的就可以提交的話，遍歷positionList的時候用some函數，不要用foreach；因為如果兩個老師信息填寫不全，一個老師信息正常，你在做錯誤提示的時候，肯定只提示一下就可以，但是foreach會遍歷所有的對象，會出現兩次報錯；