1

Tengo estos botones agrupados en mi componente de VUE

<template>
 <MDBBtnGroup v-model="tipo_operacion" class="shadow-0">
   <MDBBtn active color="light" value="1" @click="tipoOperacionAction(value)">Comprar</MDBBtn>
   <MDBBtn color="light" value="2" @click="tipoOperacionAction()">Alquilar</MDBBtn>
   <MDBBtn color="light" value="3" @click="tipoOperacionAction()">Emprendimientos</MDBBtn>
 </MDBBtnGroup>
</template>

<script>
 export default {
  computed:{
    ...mapState(['tipo_operacion'])
  },
  methods: {
    ...mapActions('filtros', ['tipoOperacionAction'])
  },
  components: {
    MDBBtnGroup,
    MDBBtn,
  },
 };
</script>

Y quiero que al clickear cualquiera de esos botones, cambie un valor en el Store de VUEX

state: {
    tipo_operacion: 1
},
mutations: {
   setTipoOperacion(state, payload) {
       state.tipo_operacion = payload;
    }
},
actions: {
   tipoOperacionAction({ commit }, value) {
       console.log(value)
    }
}

-> Yo espero poder imprimir en consola 1,2 o 3, depende del botón que yo aprete. Pensé que podría enviar algún parámetro a través de la acción, pero no sé como hacer referencia al elemento en el que hago click, para así extraer el valor value .

1 respuesta 1

2

La mejor forma de hacer esto es que no repitas el código y utilices un v-for de vue para generar variantes de un elemento según un arreglo de data que tengas

const app = new Vue({
  el: "#app",
  data() {
    return {
      buttonsData: [{
          value: 1,
          label: "Comprar"
        },
        {
          value: 2,
          label: "Alquilar"
        },
        {
          value: 3,
          label: "Emprendimientos"
        },
      ],
    };
  },
  methods: {
    logData(data) {
      console.log(data);
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-for="data in buttonsData" :key="data.value" :value="data.value" @click="logData(data.value)">
        {{ data.label }}
      </button>
</div>

Si esto no te convence mucho también puedes pasar como argumento directamente en la función el valor estático que quieras evaluar, por ejemplo así:

const app = new Vue({
  el: "#app",
  methods: {
    logData(data) {
      console.log(data);
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button value="1" @click="logData(1)">Comprar</button>
  <button value="2" @click="logData(2)">Alquilar</button>
  <button value="3" @click="logData(3)">Emprendimientos</button>
</div>

1
  • Muchas gracias, lo habia resuelto pasando tipoOperacionAction($event) y recibiendo $event.currentTarget en mi store, pero definitivamente esta debe ser la manera de hacerlo aplicando correctamente los principios de los fw reactivos. A veces me olvido de las herramientas que tengo y quiero resolver las cosas como si estuviera en jQuery. Muchisimas gracias.
    – Agustin G.
    Commented el 10 may. 2021 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.