javascript - v-if not working on template - Stack Overflow

admin管理员组

文章数量:1353618

So I am relatively new to learning Vue.js. I have gotten to understand most of it so far but I still have trouble with v-if never working. For example...

I would expect these to not show because showProgress is false!

<template v-if="showProgress">
  <div id="progressCols" class="md-layout">
    <div class="md-layout-item" :class="[{ activeStep: currentStep(1) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(2) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(3) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(4) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(5) }, '.md-elevation-1']"></div>
    {{ showProgress }}
  </div>
</template>

<script>
  export default {
    name: 'ProgressCols',
    data: function(){
      return {
        showProgress: false 
      }
    },
    methods: {
      currentStep(i){
        let n = 0;
        if (this.$route.params.name == "Ailments") {
          n =  1; 
        } else if (this.$route.params.name == "Effects") {
          n =  2; 
        }

        i < n ? true : false
      }
    }
  }
</script>

So I am relatively new to learning Vue.js. I have gotten to understand most of it so far but I still have trouble with v-if never working. For example...

I would expect these to not show because showProgress is false!

<template v-if="showProgress">
  <div id="progressCols" class="md-layout">
    <div class="md-layout-item" :class="[{ activeStep: currentStep(1) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(2) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(3) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(4) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(5) }, '.md-elevation-1']"></div>
    {{ showProgress }}
  </div>
</template>

<script>
  export default {
    name: 'ProgressCols',
    data: function(){
      return {
        showProgress: false 
      }
    },
    methods: {
      currentStep(i){
        let n = 0;
        if (this.$route.params.name == "Ailments") {
          n =  1; 
        } else if (this.$route.params.name == "Effects") {
          n =  2; 
        }

        i < n ? true : false
      }
    }
  }
</script>

• javascript
• vue.js

Share Improve this question Follow edited Jun 3, 2018 at 2:59 jhpratt 7,1301616 gold badges4242 silver badges5353 bronze badges asked Jun 3, 2018 at 2:41 Michael PaccioneMichael Paccione 2,82788 gold badges4444 silver badges8080 bronze badges 3

• The template tags are special, it'll work on anything else though! – ippi Commented Jun 3, 2018 at 2:44
• You can inline the template in your ponent: { template: '<div>Hello</div>', ... } without any <template>-tags. So I think the tags are there for mainly two reasons: To help the parser easily find start and end of your template. and to help your IDE with syntax highlighting. You can do <template lang="jade"> when you use other things than html, but that is (probably?) also the only usable attribute on the template-tag. – ippi Commented Jun 3, 2018 at 3:07
• Related: stackoverflow./q/47459404/104380 – vsync Commented Dec 24, 2019 at 21:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The v-if should be on the outermost div, not template.

<template>
  <div id="progressCols" class="md-layout" v-if="showProgress">
    <div class="md-layout-item" :class="[{ activeStep: currentStep(1) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(2) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(3) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(4) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(5) }, '.md-elevation-1']"></div>
    {{ showProgress }}
  </div>
</template>

<script>

  export default {
    name: 'ProgressCols',
    data: function(){
      return {
        showProgress: false 
      }
    },
    methods: {
      currentStep(i){
        let n = 0;
        if (this.$route.params.name == "Ailments") {
          n =  1; 
        } else if (this.$route.params.name == "Effects") {
          n =  2; 
        }

        i < n ? true : false
      }
    }
  }

</script>

Without a v-else on the template, it doesn't know what to render when false.

本文标签： javascriptvif not working on templateStack Overflow