[Vue warn]: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство« секс »из неопределенного» - PullRequest
Новая
       25

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство« секс »из неопределенного»

0 голосов
/ 25 ноября 2018

Я делаю v-for для родительского компонента altoke-layer и v-for для его дочернего компонента altoke-flyers.

отправляю массив a_c, в котором хранится запрос, от отцасыну, это работает, но у меня есть предупреждение об ошибке в консоли:

пожалуйста, сообщество, помогите мне понять, что я делаю неправильно.

это ответ консоли 

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)

эта часть кода в html, где родительский компонент помечен (папа) 

 <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 код 

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))}) 
  }
 },
})

1 Ответ

0 голосов
/ 29 ноября 2018

Добрый день, я был несколько занят и беспокоился об этой проблеме, которая, очевидно, не имела большого значения.Я отправил необходимые переменные в дочерний компонент, 

   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>
      `
    })

, и в этом я добавил реквизиты, которые будут их использовать. 

           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>
              `
            })
...