时间戳

首页 > 解决方案 > [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘sex’”

components - [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘sex’”

问题描述

我正在对父组件 altoke-layers 组件执行 v-for，并对其子组件 altoke-flyers 执行 v-for。

将存储查询的数组 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))}) 
  }
 },
})

标签： componentsv-for

解决方案

美好的一天，我一直有些忙，担心这个问题，这显然不是什么大问题。我将必要的变量发送到子组件，

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

推荐阅读