Vue select option v-for value not sending any value

October 19, 2023

I am using select option for displaying multiple item with a certain value. i test it with span so that i could figure if the value what was i expecting but it doesn’t

<div class="mb-3">
     <label for="warehouse" class="form-label">Warehouse</label><br>
     <select name="" id="" class="form-select" v-model="stateWorker.newWarehouse">
            <option v-for="item in state.warehouse" :key="item.warehouse" 
            value="{{item.warehouse}}" >{{item.warehouse}}</option>
     </select>
     <span>test: {{stateWorker.newWarehouse}}</span>
</div>

i was expecting that in span test: warehouse 1. instead i got test: {{item.warehouse}}

>Solution :

Replace value="{{item.warehouse}}" by :value="item.warehouse" :

<div class="mb-3">
<label for="warehouse" class="form-label">Warehouse</label><br />
<select name="" id="" class="form-select" v-model="stateWorker.newWarehouse">
    <option v-for="item in state.warehouse" :key="item.warehouse" :value="item.warehouse">
    {{ item.warehouse }}
    </option>
</select>
<span>test: {{ stateWorker.newWarehouse }}</span>
</div>