Question

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

从父亲到儿子发送存储查询的数组a_c，这行得通，但是控制台中出现错误警报：

请社区，帮助我了解我在做错什么。

这是控制台响应

select qt.query_sql_text, p.plan_id, ws.wait_category, ws.wait_category_desc, ws.avg_query_wait_time_ms
from sys.query_store_query q
left join sys.query_store_query_text qt
  on q.query_text_id= qt.query_text_id
left join sys.query_store_plan p
  on q.query_id = p.plan_id
left join sys.query_store_wait_stats ws
 on p.plan_id = ws.plan_id
order by q.query_id, p.plan_id, ws.wait_category, ws.wait_category_desc, ws.avg_query_wait_time_ms desc

在html中标记父组件（父亲）的这段代码

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)

vue.js代码

 <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>

Answer 1

早上好，我有点忙，担心这个问题，这显然没什么大不了的。我将必要的变量发送到了子组件

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

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

1 个答案: