Question 268170 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Fix value call in JS

    To fix you need to change value="{{item.warehouse}} to value="item.warehouse.
    Fixed Code:

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search