1. 程式人生 > >vue中的單選框選中值和最後傳給後臺值不一樣,怎麼獲取

vue中的單選框選中值和最後傳給後臺值不一樣,怎麼獲取

vue中的單選框選中值和最後傳給後臺值不一樣:這句話的意思是如果我選擇男女,顯示的也是男女,但是我I需要給後臺的就是id。可能男的id=0,女的id=1;

這時我們應該怎麼辦呢?

去個最基礎的例子

<div id="example-4" class="demo"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two"
v-model="picked">
<label for="two">Two</label> <br> <span>Picked: {{ picked }}</span></div>

data{

return {

      picked:' ',

  }

}

--------------------最後picked是你選擇的那個單選框的value,也就是one或者two 。

所以我們知道最後選中的也就是這個單選框的value值,並把這個值賦給了他繫結的 v-model的那個元素

上面是所有的單選都寫出來,如果是迴圈呢?

下面是選中快遞獲取選中的哪一項的id值。並且快遞名字也是顯示出來的。

選擇快遞方式

            <form class="mui-input-group change" >
                    <div class="mui-input-row mui-radio"   v-for="db in send">
                        <label>{{db.e_name}}</label>
                        <input name="radio1" type="radio" v-model="express.id

" :value="db.id"@tap="express.e_name=db.e_name">  <!--//綠色的一定要,否則你只是改變了id的值輸出的是讓express.id=db.id,但是顯示的你那個id對應的名字啊-->
                    </div>
           </form>

下面顯示你選擇的快遞方式:

<div>快遞方式

      <a class="mui-pull-right mui-navigate-right">
               <p style="padding-right:20px;color:#000;line-height: 40px;">{{express.e_name}}</p>
      </a>

</div>


 this.$api("Bsfamily/order",).then(db=>{       
                this.send=db.express;
//              沒有獲取到id說明不是從那個選擇快遞方式頁面選中回來的,就先賦值
                if(!this.express.id){
                this.express.id= db.express[0].id;//預設的選中第一個
                this.express.e_name= db.express[0].e_name;
                }
           });