VueJs set custom attribute value in select option

Question

I'm using vuejs with laravel .. what I want is to access custom attribute called price like this ..

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

and this is the vuejs code

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

like this everything working so good .. but my problem is when I want to set the price based one the v-for like this ..

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

in console I gat text 'unit.price' not the real number come from v-for in the loop .. so how can I set the attribute price based on unit.price.. thanks ..

tony19 · Accepted Answer · 2022-07-16 01:03:04Z

1

You need to bind price attribute. binding attribute

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

edited Jul 16, 2022 at 1:03

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 22, 2020 at 23:54

Aslam H

1,8195 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs set custom attribute value in select option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related