get value of a <card> -dynamic- value

Question

I'm developing a web app that make food orders. Users should be able to pick what they want to order from the menu page. I've developed a menu.vue component that retrieves dishes from the local db and displays them:

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

when the user clicks on the button in the specific card, Is there a way to save in a variable the content of the h3 tag?

I tried using v-model, but it can't be used on h3 tags.

Answer 1

The value of the h3 tag is already saved in the dish.food_name variable.

Therefore if you want to safe it in a separate variable you can simply safe the value in the @click="" event of the button.

For example:

<button @click="variableName = dish.food_name">Button</button>

Another option would be to call a function in the @click="" if you want to do something else when the button is pressed.

<script setup>
   import {ref} from 'vue';

   const variableName = ref('');

   function buttonPressed(passedVariable){
      variableName.value = passedVariable;
   }
</script>

<template>
   <button @click="buttonPressed(dish.food_name)">Button</button>
</template>