Vue中select的option通过v-for绑定value无法传递预期值问题

• 问题根源：option标签的value属性你用了value="{{item.warehouse}}"，这种原生HTML属性里的双大括号插值不会被Vue解析，浏览器会直接把{{item.warehouse}}当作选项的实际值。选中选项后，v-model绑定的stateWorker.newWarehouse就会被赋值为这个字符串，所以span里显示的就是test: {{item.warehouse}}。
• 修复方案：把value改成Vue的绑定语法，用:value（v-bind:value的简写）来绑定item.warehouse，这样Vue才能正确解析并传递选项的真实值。

修正后的代码：

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

内容的提问来源于stack exchange，提问作者Bryant