v-if in template element do not report non-existant variables

[Oscar-ren]

Version

2.4.4

Reproduction link

https://jsfiddle.net/9x0pvs9y/

Steps to reproduce

When judging whether to show the scopedSlots template

What is expected?

expected scopedSlots template can show/hidden base on if condition

What is actually happening?

template doesn't care v-if

---

I know I can put the v-if on the parent tag, but this will have some redundancy

[posva]

In your example, the isShow is not being ignored, it doesn't exist in the context where it's used, it only exist in the component. However, it should show an error saying isShow is not defined

[Oscar-ren]

as i think, isShow not defined then the v-if will get false, but it still display

[yyx990803]

Using v-if on a scoped slot doesn't make sense, because <template> in this case is just an abstract container for the inner template. We can add a warning for it though.

[hezhongfeng]

I know I can put the v-if on the parent tag, but this will have some redundancy

how to do this?
I tested，It's invalid.

[hezhongfeng]

@yyx990803
I want to control the <template> existing or not.
since v-if is doesn't make sense, how can I do?

    <el-table-column v-for="(header, index) of tableHeaders" :key="index">
      <div slot-scope="scope" v-if="header.multipleRow">
        <div class="biz-customcol">
          <img :src="scope.row[header.prop].img" alt="">
          <div class="biz-two-row">
            <span style="margin-left: 10px">{{ scope.row[header.prop].value1 }}</span>
            <span style="margin-left: 10px">{{ scope.row[header.prop].value2 }}</span>
          </div>
        </div>
      </div>
    </el-table-column>

<template> is invalid when I add a wrap for the <template> like this.

    <el-table-column v-for="(header, index) of tableHeaders" " :key="index">
      <div v-if="header.multipleRow">
        <div slot-scope="scope">
          <div class="biz-customcol">
            <img :src="scope.row[header.prop].img" alt="">
            <div class="biz-two-row">
              <span style="margin-left: 10px">{{ scope.row[header.prop].value1 }}</span>
              <span style="margin-left: 10px">{{ scope.row[header.prop].value2 }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-table-column>