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

Question

我正在尝试添加一个按钮来获取所选餐厅列表的 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 以在我的按钮上使用它。

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