I'm doing a v-for on a parent altoke-layers component, and a v-for on its son component altoke-flyers.
send the array a_c that stores the query, from the father to the son, this works, but I have error alert in console:
please community, help me understand what I'm doing wrong.
this is the console response
vue.js:597 [Vue warn]: Error in render: "TypeError: Cannot read property 'sex' of undefined"
found in
---> <AltokeFlyers>
<AltokeCapas>
<Root>
-------------------------------------------
warn @ vue.js:597
vue.js:1743 TypeError: Cannot read property 'sex' of undefined
at Proxy.eval (eval at createFunction (vue.js:10667), <anonymous>:3:234)
at VueComponent.Vue._render (vue.js:4535)
at VueComponent.updateComponent (vue.js:2788)
at Watcher.get (vue.js:3140)
at new Watcher (vue.js:3129)
at mountComponent (vue.js:2795)
at VueComponent.Vue.$mount (vue.js:8527)
at VueComponent.Vue.$mount (vue.js:10926)
at init (vue.js:4131)
at createComponent (vue.js:5595)
this fraction of code in the html where the parent component is tagged (father)
<altoke-capas v-for="(ab, nb) in a_b"
:key="nb++"
:ab="ab"
:a_c="a_c"
v-bind:id="'Slide' + nb"
v-bind:for="'Slide' + nb"
></altoke-capas>
vue.js code
Vue.component('altoke-flyers',{
props: ['ac'],
template: `
<div>
<div class="isquierda">izquierda</div>
<div class="list">
<label class="img" for="Slide6" >
<div v-html="ac.sex" class="lege"></div>
<img v-bind:src="'./files/ski/webcompleta/files/media/img/img/flyers/' + ac.qui + '/124-186.jpg'">
</label>
</div>
<div class="derecha">derecha</div>
</div>
`
})
Vue.component('altoke-capas',{
props: ['ab', 'a_c'],
template: `
<label class="Slide">
<altoke-flyers v-for="(ac, nc) in a_c"
:key="nc++"
:ac="ac"
v-if="ab.a > 0"
v-bind:class="'content ' + ab.b"
></altoke-flyers>
<altoke-flyers
v-if="ab.a > 0"
v-bind:class="'content ' + ab.c"
></altoke-flyers>
</label>
`
})
var app = new Vue({
el:'.altoke',
data: {
mostrar: false,
a_a: [
{ a: "", b: "pel", m: 0, n: false },
{ a: "Inicio", b: "home", m: 1, n: true },
{ a: "Pedidos", b: "comment", m: 1, n: false },
{ a: "Reporte", b: "bullhorn", m: 1, n: false },
{ a: "Generos", b: "list-alt", m: 1, n: false},
{ a: "Nosotros", b: "chalkboard-teacher", m: 1, n: false},
{ a: "", b: "pel", m: 1, n: false },
{ a: "", b: "pel", m: 1, n: false },
],
a_b: [
{ a: "1", b: "pels", c: "sers", m: 0, n: false },
{ a: "0", b: "", c: "", m: 1, n: true },
{ a: "0", b: "", c: "", m: 1, n: false },
{ a: "0", b: "", c: "", m: 1, n: false },
{ a: "0", b: "", c: "", m: 1, n: false},
{ a: "0", b: "", c: "", m: 1, n: false},
],
a_c:[],
},
created: function(){
if (localStorage.getItem('vlist')){
try {
this.a_c = JSON.parse(localStorage.getItem('vlist'));
} catch(e) {
localStorage.removeItem('vlist');
}
} else {
this.get_contacts();
}
},
methods:{
get_contacts: function(){
//const options = { method: 'post', body: 'foo=bar&test=1' }
fetch("./files/icl/master.php")
.then(response=>response.json())
.then(json=>{localStorage.setItem('vlist', JSON.stringify(this.a_c=json.contactos))})
}
},
})
Good day, I've been somewhat busy and worried about this problem, which apparently was not a big deal. I sent the necessary variables to the child component,
Vue.component('altoke-capas',{
props: ['ab', 'a_c'],
template: `
<label class="Slide">
<altoke-flyers v-for="(ac, nc) in a_c"
:key="nc++"
:ac="ac"
-------->
:sex="ac.sex"
:qui="ac.qui"
-------->
v-if="ab.a > 0"
v-bind:class="'content ' + ab.b"
></altoke-flyers>
<altoke-flyers
v-if="ab.a > 0"
v-bind:class="'content ' + ab.c"
></altoke-flyers>
</label>
`
})
and in this I added the props that would use them.
Vue.component('altoke-flyers',{
props: {
------>
sex: String,
qui: String,
------>
},
template: `
<div>
<div class="isquierda">izquierda</div>
<div class="list">
<label class="img" for="Slide6" >
|
| |
<div v-html="sex" class="lege"></div> |
<img v-bind:src="'./files/ski/webcompleta/files/media/img/img/flyers/' + qui + '/124-186.jpg'">
</label>
</div>
<div class="derecha">derecha</div>
</div>
`
})