VueJs 在选择选项中设置自定义属性值

Posted

技术标签:

【中文标题】VueJs 在选择选项中设置自定义属性值【英文标题】:VueJs set custom attribute value in select option 【发布时间】:2020-09-09 22:00:25 【问题描述】:

我正在使用带有 laravel 的 vuejs .. 我想要的是像这样访问名为 price 的自定义属性..

<select name='unit[]' required @change='change_unit($event)'>
    <option v-for='(unit) in line.units' price='66'  :value='unit.get_unit_id.id'>@unit['get_unit_id']['name']</option>
</select>

这是 vuejs 代码

change_unit:function(event)

    let get_val = event.target.selectedOptions[0].getAttribute("price");
    console.log("Value from the Attribute: ", get_val)

像这样一切都很好.. 但我的问题是,当我想像这样根据 v-for 设置价格时..

<option v-for='(unit) in line.units' price='unit.price' >

在控制台中,我输入文本 'unit.price' 不是实数来自循环中的 v-for .. 那么如何根据 unit.price 设置属性价格 .. 谢谢..

【问题讨论】:

【参考方案1】:

你需要绑定price属性。 binding attribute

<option v-for='(unit) in line.units' :price='unit.price'>

【讨论】:

以上是关于VueJs 在选择选项中设置自定义属性值的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iOS 中设置自定义属性? [复制]

如何在 django 表单中设置自定义 HTML 属性?

如何在 UIIMagePickerController 中设置自定义图像

无法在导航条中设置自定义大标题

在标签栏中设置自定义图标以突出显示/未突出显示

我可以在 iPhone 的 CLLocationManager 中设置自定义位置吗