V-если не работает с шаблоном

Так что я относительно новичок в изучении Vue.js. Я до сих пор понял большую часть этого, но у меня все еще есть проблемы с v-if никогда не работает. Например...

Я ожидал, что они не будут отображаться, потому что showProgress имеет значение 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>

Теги template особенные, но они будут работать со всем остальным!

— 03.06.2018 04:44

Вы можете встроить шаблон в свой компонент: { template: '<div>Hello</div>', ... }без всяких<template>-tags. Поэтому я думаю, что теги существуют в основном по двум причинам: чтобы помочь синтаксическому анализатору легко найти начало и конец вашего шаблона. и помочь вашей IDE с подсветкой синтаксиса. Вы можете использовать <template lang = "jade">, когда используете другие вещи, кроме html, но это (возможно?) Также единственный пригодный для использования атрибут в теге шаблона.

— 03.06.2018 05:07

Связанный: stackoverflow.com/q/47459404/104380

— 24.12.2019 22:31

javascript vue.js

03.06.2018 04:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

9 503

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

v-if должен быть на крайнем div, а не 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>

Без v-else в шаблоне он не знает, что отображать, когда ложно.

Спасибо большое! Ты спас мне день! Потому что в документации сказано, что можно использовать template + v-if, что неверно ...

— 25.04.2019 22:00

условный ifможетиспользоваться в шаблоне

— 24.12.2019 21:55

@vsync Я думаю, что суть вопроса (и причина, по которой я попал сюда намного позже) заключается в том, что в документах говорится, что это поддерживается, но не работает ... в моем случае даже с v-else в отдельном шаблоне как Документы показывают. Что не ясно из документации, так это то, что он работает, если используется в тегах шаблона, которые не являются самым внешним шаблоном.

— 12.03.2021 22:01

03.06.2018 04:45