前端el-button绑定事件

Question

<div class="dish-information">
          <div id="box" v-for="dish in dishes":key="dish.dish_id" class="dish-information-area">
            <div class="dish-information-img">
              <img id="dish-img" v-bind:src="dish.dish_img_url">
            </div>
            <div class="dish-information-nameandprice">
              <div class="dish-name">{{dish.name}}</div>
              <div class="dish-price">{{dish.price}}</div>
            </div>
            <div class="dish-information-button">
              <el-button @click="buy"  v-bind:id="'button'+dish.dish_id" type="primary" round>点击下单</el-button>
            </div>
          </div>
          </div>

如上，这样的一堆el-button该怎样绑定事件，事件该咋实现。我想的就是点击后弹出一个小框，选择份数，辣度，备注等，再点击确定下单，同时这个按键对应的dish_id连同这些传到后端

Answer 1

基于Monster 组和GPT的调写：

可以在Vue实例中定义一个buy方法，并在el-button中使用@click="buy(dish.dish_id)"来绑定该方法，并传递当前dish.dish_id作为参数。

在该buy方法中，你可以使用Vue.js的el-dialog组件来弹出一个小窗口来选择份数、辣度、备注等信息。同时，你可以将所需的参数存储在Vue实例的data属性中，当用户点击“确定”按钮时，将这些参数一并发送给后端进行处理。

下面是一个简单的示例：

<template>
  <div>
    <div v-for="dish in dishes" :key="dish.dish_id">
      <el-button @click="buy(dish.dish_id)">点击下单</el-button>
    </div>
    <el-dialog :visible.sync="showDialog">
      <el-input v-model="quantity" placeholder="请输入份数"></el-input>
      <el-input v-model="spiciness" placeholder="请输入辣度"></el-input>
      <el-input v-model="remark" placeholder="请输入备注"></el-input>
      <el-button @click="confirmOrder">确定下单</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dishes: [],
      showDialog: false,
      selectedDishId: null,
      quantity: null,
      spiciness: null,
      remark: null,
    }
  },
  methods: {
    buy(dishId) {
      this.selectedDishId = dishId
      this.showDialog = true
    },
    confirmOrder() {
      // Send selectedDishId, quantity, spiciness, and remark to backend
      // ...
      // Hide dialog
      this.showDialog = false
    },
  },
}
</script>