Hello, I have this code with vue cli and I am not updating the data of the second component. I am using a project echo in electron-vue / vuetify
main.js
import Vue from 'vue'
import axios from 'axios'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import App from './App'
import router from './router'
import store from './store'
export const clientBus = new Vue({
methods: {
editClient: function (editable, client) {
console.log(editable)
this.$emit('editable', {editable, client})
}
}
})
Vue.use(Vuetify)
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
components: {App},
router,
store,
template: '<App/>'
}).$mount('#app')
component 1
<template>
<v-container fluid grid-list-xl text-xs-center>
<v-layout row>
<v-flex xs10 offset-xs1>
<v-card>
<v-card-title primary-title dark class="red lighten-1 pointer" @click="show = !show">
<div>
<div class="headline white--text pointer"><i class="fa fa-search"></i> Filtro de busqueda</div>
</div>
<v-spacer></v-spacer>
<v-icon icon class="white--text pointer">{{ show ? 'fa-chevron-up' : 'fa-chevron-down' }}</v-icon>
</v-card-title>
<v-slide-y-transition>
<v-card-text v-show="show">
<v-form v-model="valid">
<v-layout row wrap>
<v-flex xs12 md3>
<v-text-field
label="Nombre"
v-model="filter.name"
prepend-icon="fa-user fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-text-field
label="Apellido"
v-model="filter.lastName"
prepend-icon="fa-user fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-text-field
label="Documento"
v-model="filter.document"
prepend-icon="fa-user fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-text-field
type="number"
label="Telefono"
v-model="filter.phone"
prepend-icon="fa-phone fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-text-field
label="Email"
v-model="filter.mail"
prepend-icon="fa-envelope-o fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-select
v-bind:items="localities"
v-model="filter.locality"
label="Select"
prepend-icon="fa-map-marker fa-lg"
autocomplete
></v-select>
</v-flex>
</v-layout>
</v-form>
<v-layout row wrap>
<v-flex md12 offset-md8>
<v-btn flat color="error" @click="clearFilters">Limpiar</v-btn>
<v-btn color="purple darken-2" dark @click="getClientFilter">
Buscar
</v-btn>
<v-btn color="deep-orange darken-2" dark
router
:to="'/new-client'">
Nuevo
</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-slide-y-transition>
</v-card>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs10 offset-xs1>
<v-data-table
v-bind:headers="headers"
v-bind:items="clients"
v-bind:search="search"
v-bind:pagination.sync="pagination"
hide-actions
class="elevation-1">
<template slot="headerCell" slot-scope="props">
<v-tooltip bottom>
<span slot="activator">
{{ props.header.text }}
</span>
<span>
{{ props.header.text }}
</span>
</v-tooltip>
</template>
<template slot="items" slot-scope="props">
<td class="text-xs-left">{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.document }}</td>
<td class="text-xs-left">{{ props.item.locality }}</td>
<td class="text-xs-left">{{ props.item.state }}</td>
<td class="text-xs-left">
<v-btn icon class="mx-0" color="primary" @click="editClient(props.item)">
<v-icon>fa-pencil</v-icon>
</v-btn>
<v-btn icon class="mx-0" color="error">
<v-icon>fa-trash</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
</div>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import axios from 'axios'
import UrlUtils from '../../class/UrlUtils'
import {clientBus} from '../../main'
export default {
mounted () {
this.getClients()
this.getLocalities()
},
data: () => ({
clients: [],
show: true,
valid: false,
localities: [],
search: '',
pagination: {},
selected: [],
headers: [
{
text: 'Nombre',
align: 'left',
value: 'name'
},
{
text: 'DNI',
align: 'left',
value: 'calories'
},
{
text: 'Localidad',
align: 'left',
value: 'fat'
},
{
text: 'Estado',
align: 'left',
value: 'carbs'
},
{
text: 'Acciones',
align: 'left',
value: 'protein'
}
],
filter: {
name: null,
lastName: null,
document: null,
phone: null,
mail: null,
locality: null
}
}),
methods: {
getLocalities: function () {
axios.get(UrlUtils + '/api/localities').then((res) => {
res.data.localities.forEach(locality => {
this.localities.push(locality.name)
})
})
},
getClients: function () {
axios.get(UrlUtils + '/api/client/').then((res) => {
if (res.data.client.length > 0) {
this.clients = res.data.client
}
})
},
getClientFilter: function () {
axios.post(UrlUtils + '/api/client/filter', this.filter).then((res) => {
if (res.data.clients.length > 0) {
this.show = false
this.clients = res.data.clients
this.clearFilters()
}
})
},
clearFilters: function () {
this.filter.name = null
this.filter.lastName = null
this.filter.document = null
this.filter.phone = null
this.filter.mail = null
this.filter.locality = null
},
editClient: function (client) {
clientBus.$emit('emit2', {editable: true, client: client})
this.$router.push('/new-client')
}
},
computed: {
pages () {
let val = 1
if (this.clients.length > 5) {
if (Math.trunc(this.clients.length / 5) < this.clients.length / 5) {
val = Math.trunc(this.clients.length / 5) + 1
} else {
val = Math.trunc(this.clients.length / 5)
}
}
return val
}
}
}
</script>
component 2
<template>
<v-container fluid grid-list-xl>
<v-layout row>
<v-flex xs10 offset-xs1>
<v-card>
<v-card-title primary-title dark class="red darken-2">
<div>
<div class="headline white--text"><i class="fa fa-user-plus"></i> Nuevo Cliente</div>
</div>
</v-card-title>
<v-card-text>
<v-form v-model="valid">
<v-layout row wrap>
<v-flex xs12>
<v-card>
<v-card-title primary-title dark class="purple darken-2">
<div>
<div class="headline white--text"><i class="fa fa-user-o"></i> Cliente</div>
</div>
<v-spacer></v-spacer>
<v-icon icon @click="show = !show" class="white--text pointer">{{ show ? 'fa-chevron-up' :
'fa-chevron-down' }}
</v-icon>
</v-card-title>
<v-slide-y-transition>
<v-card-text v-show="show">
<v-layout row wrap>
<v-flex xs12 md4>
<v-text-field
label="Nombre"
v-model="client.name"
prepend-icon="fa-user-circle-o fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
label="Apellido"
v-model="client.lastName"
prepend-icon="fa-user-circle-o fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
type="number"
min="0"
label="Documento"
v-model="client.document"
prepend-icon="fa-book fa-lg"
></v-text-field>
</v-flex>
</v-layout>
</v-card-text>
</v-slide-y-transition>
</v-card>
</v-flex>
</v-layout>
<br>
<v-layout row wrap>
<v-flex xs12>
<v-card>
<v-card-title primary-title dark class="purple darken-2">
<div>
<div class="headline white--text"><i class="fa fa-map-o"></i> Direccion</div>
</div>
<v-spacer></v-spacer>
<v-icon icon @click="showLocation = !showLocation" class="white--text pointer">{{ showLocation ?
'fa-chevron-up' :
'fa-chevron-down' }}
</v-icon>
</v-card-title>
<v-slide-y-transition>
<v-card-text v-show="showLocation">
<v-form v-model="valid">
<v-layout row wrap>
<v-flex xs12 md2>
<v-text-field
type="text"
label="Calle"
v-model="client.street"
prepend-icon="fa-map-signs fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md2>
<v-text-field
type="number"
label="Número"
v-model="client.number"
prepend-icon="fa-hashtag fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md2>
<v-text-field
type="text"
label="Barrio"
v-model="client.district"
prepend-icon="fa-street-view fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-select
v-bind:items="departamentsSelect"
prepend-icon="fa-map-marker fa-lg"
v-model="departament"
label="Departamento"
autocomplete
></v-select>
</v-flex>
<v-flex xs12 md3>
<v-select
v-bind:items="localitySelect"
prepend-icon="fa-map-marker fa-lg"
v-model="client.locality"
label="Localidades"
autocomplete
></v-select>
</v-flex>
</v-layout>
</v-form>
</v-card-text>
</v-slide-y-transition>
</v-card>
</v-flex>
</v-layout>
<br>
<v-layout row wrap>
<v-flex xs12>
<v-card>
<v-card-title primary-title dark class="purple darken-2">
<div>
<div class="headline white--text"><i class="fa fa-address-card-o"></i> Contacto</div>
</div>
<v-spacer></v-spacer>
<v-icon icon @click="showContacto = !showContacto" class="white--text pointer">{{ showContacto ?
'fa-chevron-up' :
'fa-chevron-down' }}
</v-icon>
</v-card-title>
<v-slide-y-transition>
<v-card-text v-show="showContacto">
<v-form v-model="valid">
<v-layout row wrap>
<v-flex xs12 md3>
<v-text-field
type="number"
label="Número de telefono"
v-model="client.phone"
prepend-icon="fa-phone fa-lg"
></v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-select
v-bind:items="lines"
v-model="client.line"
label="Linea"
prepend-icon="fa-volume-control-phone fa-lg"
single-line
bottom
></v-select>
</v-flex>
<v-flex xs12 md1>
<v-layout row>
<v-flex xs1 md2>
<br>
<v-icon class="green--text">fa-whatsapp fa-lg</v-icon>
</v-flex>
<v-flex xs12 md10>
<br>
<v-switch :label="client.wpp ? 'Si' : 'No'"
v-model="client.wpp"
color="success"
></v-switch>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs12 md5>
<v-text-field
type="mail"
label="E-mail"
v-model="client.mail"
prepend-icon="fa-envelope-o fa-lg"
></v-text-field>
{{client.mail}}
</v-flex>
</v-layout>
</v-form>
</v-card-text>
</v-slide-y-transition>
</v-card>
</v-flex>
</v-layout>
</v-form>
<v-flex xs2 offset-xs10>
<v-btn flat color="error">Cancelar</v-btn>
<v-btn v-if="!editable" color="purple darken-2" dark
@click="saveClient">
Guardar
</v-btn>
<v-btn v-else color="purple darken-2" dark @click="saveClient">
Actializar
</v-btn>
</v-flex>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import axios from 'axios'
import UrlUtils from '../../class/UrlUtils'
import {clientBus} from '../../main'
export default {
name: 'new-client',
mounted () {
this.getDepataments()
this.getLocalities()
},
data: () => ({
editable: false,
valid: true,
departaments: [],
departamentsSelect: [],
localitySelect: [],
show: true,
showContacto: true,
showLocation: true,
lines: ['Personal',
'Claro',
'Movistar',
'Fijo'],
departament: null,
client: {
_id: null,
__v: null,
name: null,
lastName: null,
document: null,
phone: null,
line: null,
mail: null,
wpp: false,
street: null,
number: null,
district: null,
locality: null,
state: 'Activo'
}
}),
methods: {
getDepataments: function () {
axios.get(UrlUtils + '/api/departaments').then((res) => {
this.departaments = res.data.departaments
res.data.departaments.forEach(departament => {
this.departamentsSelect.push(departament.name)
})
})
},
getLocalities: function () {
axios.get(UrlUtils + '/api/localities').then((res) => {
res.data.localities.forEach(locality => {
this.localitySelect.push(locality.name)
})
})
},
getLocalitiesFilters: function () {
axios.get(UrlUtils + '/api/localities/' + this.departament).then((res) => {
console.log(res.data.localities)
this.localitySelect = []
res.data.localities.forEach(locality => {
this.localitySelect.push(locality.name)
})
})
},
saveClient: function () {
axios.post(UrlUtils + '/api/client', this.client).then((res) => {
console.log(res)
this.$router.push('/search-client')
}).catch((err) => {
console.log(err)
})
}
},
created () {
clientBus.$on('emit2', (clientOption) => {
console.log('Created', clientOption.editable)
this.editable = clientOption.editable
if (clientOption.editable) {
console.log('clientBus', clientOption.client)
// this.client = clientOption.client
this.client.mail = clientOption.client.mail
console.log('client', this.client)
}
})
},
watch: {
departament: function (event) {
this.getLocalitiesFilters()
}
}
}
</script>