Javascript – Vue select option v-for value not sending any value

Problem:

I am using a select option to display multiple items with specific values. I tested it with a span element to see if the value I was expecting was displayed, but it didn’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>

Actually mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive or its shortand syntax “:”

More info about attribute bindings here : https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings