Почему в шаблоне не работает значение размещенное в data, а только props?

Question

[beduin01]

Вместо тысячи слов: https://jsfiddle.net/tagdjyrL/
Суть проблемы в следующем. Я принимаю props с именем "aa" и вот тут на основании егоо значения или вывожу модальное окно или нет:
<div class="modal" :class="{'is-active': aa}" >
Я не могу понять, почему если я пишу:

<div class="modal" :class="{'is-active': isActive}" >

Все перестает работать. `isActive` же элемент в data который я так же должен иметь возможность проверить на значение. Почему работает только проверка на значение принятое в `props` ?

В чем проблема?

Answer 1

[0xD34F]

Всё работает. "Не работает" и "работает не так, как я ожидаю" - это не одно и то же.

Назначение значения свойства на основе параметра осуществляется однократно - в data, при создании экземпляра компонента. Так что если хотите использовать в шаблоне именно свойство, вам его придётся обновлять вручную - вешайте watch на параметр.

Comments

[beduin01]

Изменить то что записано в data у компонента уже нельзя?

[0xD34F]

beduin01, можно. Ещё раз - хотите, чтобы значение свойства соответствовало значению параметра, используйте watch:

watch: {
  aa(val) {
    this.isActive = val
  }
}

[beduin01]

Спасибо, не могли бы пояснить вот этот момент "Назначение значения свойства на основе параметра осуществляется однократно - в data" я не могу понять, а если я в методе это значение переназначу, то каким образом оно будет работать тогда?

[0xD34F]

beduin01,

а если я в методе это значение переназначу

А вы переназначьте, и посмотрите, что получится.

[beduin01]

Сделал:

foo: function()
      {
        this.isActive = "new value"
        console.log(this.isActive)
      }

Вроде бы переназначилось. В консоли вижу новое значение.

[0xD34F]

beduin01, и что дальше?

[beduin01]

0xD34F, ну по идее если я поменял это значение, то и в шаблоне условие: :class="{'is-active': isActive} должно поменяться.

[0xD34F]

beduin01, ещё раз - что дальше? Мне до ваших идей дела нет. Сообщите факты.