pedi2/resources/js/components/ProductoModal.vue

<template>
	<div v-bind:class="visible ? 'is-active modal' : 'modal'">
    <div class="modal-background"></div>
        <div class="modal-card">
            <section class="modal-card-head">
                <div class="media-content">
                    <p class="modal-card-title">
                        {{ producto.nombre }}
                        <img v-show="producto.nacional" height="24px" width="24px" src="/assets/uruguay.png" />
                        <img v-show="producto.economia_solidaria" height="24px" width="24px" src="/assets/solidaria.png">
                    </p>
                    <p class="subtitle" v-show="producto.proveedor" v-text="producto.proveedor"></p>
                    <p class="subtitle is-6" v-show="producto.apto_veganxs">Apto para veganxs.</p>
                    <p class="subtitle is-6" v-show="producto.apto_celiacxs">Apto para celíacxs.</p>
                </div>
            </section>
            <section class="modal-card-body">
                <p class="subtitle is-3 has-text-weight-bold has-text-primary has-text-centered">${{ producto.precio }}</p>
            </section>
            <footer class="modal-card-foot">
                <div class="level">
                    <div class="level-item has-text-centered">
                        <div class="field has-addons">
                                <div class="control">
                              <button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad">
                                  <i class="fa fa-solid fa-minus"></i>
                              </button>
                            </div>
                          <div class="control">
                              <input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center">
                          </div>
                          <div class="control">
                              <button class="button" @click="cantidad++">
                                  <i class="fa fa-solid fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="level-item has-text-centered">
                        <button class="button" @click.capture="cerrar">Cancelar</button>
                        <button class="button is-success" @click="agregarProducto">Aceptar</button>
                    </div>
                </div>
          </footer>
      </div>
      </div>
</template>

<script>
	export default {
		data() {
		    return {
		      producto: null,
		      visible: false,
		      cantidad: 0
		    }
		  },
		  computed: {
		    miga: function(){
		      return {
		        nombre: this.producto.nombre,
		        href: "#" + this.producto.nombre
		      }
		    }
		  },
		  methods: {
		    cerrar() {
		        this.cantidad = 0;
		        this.visible = false;
		        Event.$emit("migas-pop");
		    },
		    agregarProducto() {
		        if (this.cantidad < 0) alert("No se puede agregar cantidades negativas")
		        else if (!Number.isInteger(this.cantidad)) alert("Las cantidades deben ser números enteros")
		        else {
		            Event.$emit('sync-subpedido',this.cantidad, this.producto.id);
		            this.cerrar();
		        }
		    }
		  },
		  mounted() {
		    Event.$on('producto-seleccionado', (producto) =>  {
		      this.producto = producto;
              this.cantidad = this.$root.cantidad(producto)
		      this.visible = true;
		      Event.$emit("migas-agregar",this.miga);
		    });
		  }
	}
</script>

<style>
	figure.image.icono {
	    float: right;
	    margin: 4px;
	}

	.is-thin-centered {
	    width: 50%;
	    margin-left: auto;
	    margin-right: auto;
	}
</style>