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

在vue中获取数据属性

1 个答案: