Tengo 2 componentes dentro de /resources/assets/js/components, el primero tiene:
<template>
<div class="inline">
<button @click="getDataCategory(category)" :class="is_active == category.id ? 'btn-primary' : 'btn-default' " v-for='category in categories' class='btn btn-space'>{{category.name}}</button>
</div>
</template>
<script>
import BaseUrlMixin from '../mixins/baseUrl.js';
export default {
mixins: [BaseUrlMixin],
data(){
return{
id_tournament:null,
categories:[],
data_category: false,
is_active: false,
show_data: "",
}
},
methods: {
getDataCategory: function(category){
this.is_active = category.id;
this.show_data = {
'category':category.name
};
this.data_category = true;
}
},
}
</script>
La idea es que al hacer click en el boton, llame a getDataCategory() y ahi setear this.show_data como se ve, y hasta aca funciona, ahora necesito pasar ese this.show_data a otro componente que es el siguiente. Quiero usar como se ve en el form el if="show_data" tiene valores mostrar el formulario. (Entiendo que se puede poner este componente dentro del otro, pero por cuestion de estructura del template no puedo y necesito esta comunicación.
<template>
<div>
<form @submit.prevent="store()" :if="show_data">
<label for="">Cantidad de fechas</label>
<input type="text" v-model="date" onkeypress='return event.charCode >= 48 && event.charCode <= 57' min="1" max="50" required="">
<button class='btn btn-primary btn-sm' >
<i class="fa fa-floppy-o" aria-hidden="true"></i>
Guardar
</button>
</form>
</div>
</template>
<script>
export default {
data(){
return{
id_tournament:null,
date:'',
}
},
methods: {
},
mounted() {
this.getIdTournament();
}
}
</script>