如何在选项/选择标签循环之外的按钮中使用 Vue.js 中下拉列表的选定 ID

Posted 2023-02-18

【中文标题】如何在选项/选择标签循环之外的按钮中使用 Vue.js 中下拉列表的选定 ID

【英文标题】：How to use the selected id of a dropdown in Vue.js in a button outside of option/select tag loop

【发布时间】：2021-12-25 02:30:37

【问题描述】：

我正在尝试添加一个按钮来获取所选餐厅列表的 id，这样每当我点击我的按钮时，我就可以将该 id 传递给我的 API 请求。但是，我无法将我的按钮添加到选择中，因为它消失了，而且我似乎在选项循环之外以检索 id。

<div id="selectedList" class="addFavoriteRestaurantToList">
        <select  name="list_id" @change="onChange($event)" class="form-control">
              <option>--- Select a fav list ---</option>
              <option :key="listresto.id"  v-for="listresto in favoriteRestaurantData"> listresto.name</option>
        </select>
       <button class="removeButton" @click="AddFavoriteRestaurant( listresto.id, restaurantData.id)"> Add "restaurantData.name" to your your favorite list</button>
</div>

用于返回我在 Dropbox 中选择的内容的方法（有效，但由于我无法在按钮上使用任何东西，所以我卡住了）：

onChange(event) 
  return event.target.value;

所以我希望它获取所选列表的 id 以在我的按钮上使用它。

【参考方案1】：

<div id="selectedList" class="addFavoriteRestaurantToList">
        <select v-model="list_id" name="list_id" @change="onChange($event)" class="form-control">
              <option>--- Select a fav list ---</option>
              <option :key="listresto.id" :value="listresto.id"  v-for="listresto in favoriteRestaurantData"> listresto.name</option>
        </select>
       <button class="removeButton" @click="AddFavoriteRestaurant( list_id, restaurantData.id)"> Add "restaurantData.name" to your your favorite list</button>
</div>

并且 v-model="list_id" 在数据中声明 list_id:(list_id:'')

不要忘记 :value="listresto.id"

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