Vue.js中如何获取下拉框选中id并在select外的按钮中使用

实现方案 #

• 第一步：在组件的data中新增响应式变量，用于存储下拉框选中的餐厅列表id

data() {
  return {
    // 保留你原有其他变量
    selectedListId: null
  }
}

• 第二步：修改option标签，绑定value属性为列表id，否则下拉框默认返回的是显示的文本内容，不是你需要的id值
  修改后的option代码：

<option :key="listresto.id" :value="listresto.id" v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>

• 第三步：调整onChange方法逻辑，不要直接返回选中值，而是将值赋值给刚才新增的响应式变量

onChange(event) {
  this.selectedListId = event.target.value;
}

• 第四步：修改按钮点击事件的传参，直接使用存储的selectedListId即可，还可以可选添加禁用逻辑，未选中列表时禁止点击按钮避免无效请求
  修改后的按钮代码：

<button 
  class="removeButton" 
  :disabled="!selectedListId"
  @click="AddFavoriteRestaurant(selectedListId, restaurantData.id)"
> 
  Add "{{restaurantData.name}}" to your favorite list
</button>

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