데이터가 내가이 같은 선택 양식을 가지고 VUE

Question

에 속성을 얻을 루프 V-에 대한 :

내 shippingMethod 모델을보고,이 같은 방법을 실행하는 경우

<div class="select"> 
    <select v-model="shippingMethod"> 
     <option value="{{shipping.id}}" v-for="shipping in shippingMethods" data-price="{{ shipping.amount}}">{{shipping.description}} - {{shipping.amount/100}}</option> 
    </select> 
    <div class="select__arrow"></div> 
</div> 

:

updateTotal: function(event){ 
    console.log(this.shippingMethod); 
}, 

I을 선택한 옵션의 새 값을 가져올 수 있습니다. 문제는 데이터 가격도 필요하다는 것입니다. 어떻게해야합니까?

Answer 1

배송 방법은 배열입니까? 그렇다면 {{shipping.id}}을 value으로 전달하는 대신 배열 색인 {{index}}을 전달할 수 있습니다. 그런 다음 updateTotal 메소드에서 현재 옵션 인 this.shippingMethods[this.shippingMethod]에 액세스 할 수 있습니다.

모든 것은이 같을 것이다,이 VUE 1.0 구문이 올바른지,

<div class="select"> 
<select v-model="shippingMethod"> 
    <option value="{{index}}" v-for="(shipping, index) in shippingMethods" data-price="{{ shipping.amount}}">{{shipping.description}} - {{shipping.amount/100}}</option> 
</select> 
    <div class="select__arrow"></div> 
</div> 


updateTotal: function(event){ 
    console.log(this.shippingMethods[this.shippingMethod]); 
},