No puedo lograr que los componentes se comuniquen los componentes:
componente treeview:
<template name="v-treeview">
<div class="container" id="treeviewplan">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Plan de cuenta - Reportes</div>
<div class="card-body">
<div>
<ul>
<li v-for="(itemsID, index) in dataTreeview" :key="itemsID.id">{{itemsID.name}}</li>
</ul>
<dialogpcuenta :idEmit="dataEmit" v-if="activeIdCplan==true"></dialogpcuenta>
</div>
<h2>Example 2: one item can be selected</h2>
<v-treeview
:items="items"
caption-field="name"
children-field="children"
v-model="treeview"
selectable
selected-color
value
keyField="id"
v-on:click.native="jsonDataPCuenta(treeview[0])"
>
<template slot="prepend" slot-scope="{ item, open, leaf }">
<v-icon v-if="!item.file">
{{ open ? 'mdi-folder-open' : 'mdi-folder' }}
</v-icon>
<v-icon v-else>
{{ files[item.file] }}
</v-icon>
</template>
</v-treeview>
<div>
Selected item ID: {{ treeview }}
</div>
<div>
Selected array ID: {{ treeview[0] }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
window.Vue = require('vue')
export default {
props:
{'treePcuenta':false}
,
data: () => ({
items: [],
treeview:[],
dataTreeview:[],
activeIdCplan:false,
dataEmit:[],
}),
created: function() {
// get todo items and start listening to events once component is created
this.getPlan();
},
methods:{
getPlan(){
const dev = this
let uri = "http://localhost/software/program/public/datajson";
axios
.get(uri, {
method: "GET",
mode: "no-cors",
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
withCredentials: true,
credentials: "same-origin"
})
.then(response => {
this.items = response.data;
});
},
jsonDataPCuenta(id) {
let uri = "http://localhost/software/program/public/icplan/" + id
let thix = this
this.dataEmit=id
axios
.get(uri)
.then(response => {
thix.dataTreeview = response.data;
console.log('Emito')
this.$emit('jsonDataPCuenta', 'hola como estas')
this.activeIdCplan = true;
});
},
addpcuenta(id){
this.activeIdCplan=true
}
}
}
</script>
<style lang="stylus">
#app
font-family 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
color #2c3e50
</style>
componente dialogo:
<template>
<v-layout row justify-center @jsonDataPCuenta="onPcuenta">
<v-dialog v-model="dialog" persistent max-width="600px">
<v-btn slot="activator" color="primary" dark>Open Dialogs</v-btn>
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal first name*" required></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Email*" required></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Password*" type="password" required></v-text-field>
</v-flex>
<v-flex xs12 sm6>
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-flex>
<v-flex xs12 sm6>
<v-autocomplete
:items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
label="Interests"
multiple
></v-autocomplete>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
<script>
window.Vue = require('vue')
window.treeview= require('../TreeViewPlan.vue')
export default {
props: ['idEmit'],
data: () => ({
dialog: false
}),
created: function() {
this.onPcuenta()
this.$on('jsonDataPCuenta', function (id) {
console.log('escuchando emit')
}.bind(this))
},
components:{
treeview,
},
methods:{
onPcuenta(){
console.log('Escucho')
this.$on('jsonDataPCuenta',(id)=>{
console.log(id)
})
}
}
}
</script>