得到VUE

Question

数据属性我有一个选择的形式像这样在V-for循环：

<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> 

如果我看我的shippingMethod模型和运行这样的方法：

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

我可以获得所选选项的新值。问题是我也需要数据价格值。我怎么弄到的？

Answer 1

运输方法数组？如果是这样，您可以不通过{{shipping.id}}作为value，而是传递数组索引{{index}}。然后，在您的updateTotal方法中，您可以通过this.shippingMethods[this.shippingMethod]访问当前选项。

整个事情是这样的：

<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]); 
},