Есть два вложенных template. При изменении условия v-if во внутреннем template не происходит пере-рендер. Как быть?

Question

[Николай Чуприк]

Прямо в корневом index.html есть два вложенных шаблона, отображением которые управляют переменные A и B соответственно. Пусть они вначале обе true. При изменении B не происходит обновления отображения внутреннего шаблона.

<template>
  <div v-if = "A">
     ...
     <template>
        <div v-if = "B">
             <a @click = "onClick">...</a>
        </div>
      </template>
      ...
   </div>
</template>

onClick: function() {
  this.B = false;
}

Поборол это тем, что "передёргиваю" туда-сюда значение A, чтобы вызвать обработку всего внешнего шаблона:

onClick: function() {
  this.B = false;
  this.A = !this.A;
  this.A = !this.A;
}

Но, согласитесь, это как-то коряво. А как поступают мастера Vue?

Answer 1

[Evgeny Kulakov]

Просто написать: <a @click = "onClick" v-if="B">...</a>

Comments

[Николай Чуприк]

Так не в этом суть. <a> не нужно скрывать. Суть в том, что изменения отображения внутреннего шаблона не происходят, если искусственно не инициировать изменения внешнего шаблона.

[Evgeny Kulakov]

Николай Чуприк, вот ваш пример: https://codepen.io/kerf/pen/pLqOWY
Не совсем понятно, что у вас не работает.

[Николай Чуприк]

Evgeny Kulakov, спасибо за помощь. У меня конечно всё более наворочено, чем в этом простом примере. Код большой, чтобы в нём просить разобраться. Наверное причина в чём-то ещё. Буду думать. Ещё раз благодарю.

[Evgeny Kulakov]

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