Vue点餐应用：点击卡片按钮获取h3标签内容的实现方法

问题背景 #

我正在开发一款点餐Web应用，用户可从菜单页选择想要订购的菜品。已开发menu.vue组件，从本地数据库获取菜品数据并展示，原组件代码如下：

<template>
  <div class="container text-center">
    <div v-for="course,key in Portate">
      <h1>{{key}}</h1>
      <div v-for="dish in course" class="card mb-3">
        <div class="row">
          <div class="col-lg-4">
            <img src="/img/food_default.jpg" alt="" class="img-fluid rounded-start img-thumbnail" >
          </div>
          <div class="col-lg-8">
              <div class="card-body mt-3">
                <h3 class="card-title">{{dish.food_name}}</h3>
                <h4 class="card-text text-primary">{{dish.price}}€</h4>
                <button type="button" class="btn btn-dark">Aggiungi</button>
              </div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</template>

需求是：用户点击卡片中的按钮时，将该卡片内<h3>标签的内容（即菜品名称）保存到变量中。尝试用v-model指令但失败，因为<h3>标签不支持该指令，求实现方法。

解决方案 #

v-model仅适用于表单输入类元素（如input、select等），对于<h3>这类静态展示元素，我们可以通过点击事件传递数据的方式实现需求，具体步骤如下：

1. 在组件的<script>部分定义用于存储选中菜品名称的变量，同时添加处理点击事件的方法：

<script>
export default {
  data() {
    return {
      Portate: [], // 你的菜品数据，从本地数据库获取
      selectedDish: '' // 用于存储选中的菜品名称
    }
  },
  methods: {
    saveDish(foodName) {
      this.selectedDish = foodName;
      // 这里可以添加后续逻辑，比如把菜品加入购物车等
      console.log('选中的菜品：', this.selectedDish);
    }
  },
  // 假设在这里从本地数据库获取Portate数据
  mounted() {
    // 示例：模拟获取数据
    this.Portate = {
      '开胃菜': [{ food_name: '凯撒沙拉', price: 12 }, { food_name: '法式洋葱汤', price: 15 }],
      '主菜': [{ food_name: '西冷牛排', price: 58 }, { food_name: '三文鱼意面', price: 42 }]
    };
  }
}
</script>

2. 修改模板中的按钮，为其绑定@click事件，并将当前菜品的food_name作为参数传入：

<button type="button" class="btn btn-dark" @click="saveDish(dish.food_name)">Aggiungi</button>

这样，当用户点击按钮时，当前卡片的菜品名称就会被传入saveDish方法，并赋值给selectedDish变量，完成需求。

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