Как заставить работать v-if и вложенные вычисляемые свойства?

Question

[Роман]

Здравствуйте.
В компоненте через computed properties подгружаются данные с помощью геттера из VUEX.
Затем одно из вложенных свойств через v-model привязывается к чекбоксу, если смотреть по devtools то все нормально, все изменяется.
Но при попытке прописать v-if с использованием этого свойства, при его изменении ничего в DOM не меняется.
Примерный код:

computed: {
            data: {
                get () {
                    return this.$store.getters['banks/socio_demographic_portraits_template'];
                },
                set (value) {
                    this.$store.commit("banks/updateSocioDemographicPortraitsTemplate", value);
                }
            },
}

<div class="col-sm-6" v-if="data.is_unified==false">
                        <multiposition-switch
                                v-model="data.gender_id"
                                :dictionary="genders">
                        </multiposition-switch>
</div>

В чем проблема и как это обойти?

Comments

[Роман]

ой всё, а по существу вопроса есть что-нибудь?

[Роман]

ой всё, только отправка данных в БД с перезагрузкой страницы, только хардкор?)

[Роман]

ой всё, ну да, использую Vue но не знаю что такое ajax, так точно

[Роман]

ой всё, даже уже просто интересно, причем здесь цикл?)

[Роман]

ой всё, а подробнее? или вам так в глаз бросилось необязательно сравнение с false? ну сначала я делал !data.is_unified, это просто одна из версий, которую я пытался заставить работать) ладно, о чем с вами говорить, если вы просто потроллить зашли)

[Alex Wells]

ой всё, вью - костыль? Vue обыгрывает React, за исключением native, во всем. И react это даже не фреймворк.

А уж про вещи, уровнем ниже чем react - и речи не идет. Тут либо React, либо Vue, других вариантов вообще не существует.

Но судя по вашему глупому троллингу, вы понятия не имеете о чем говорите, так что вести с вами дисскусию бесполезно.

[Alex Wells]

Геттер через devtools проверяли?

[Роман]

Alex Wells, точно про геттер уже только завтра смогу ответить.
но в секции computed точно менялось то свойство, которое я пытался привязать к v-if. Плюс делал простенькую кнопку с обработкой клика, и по клику в консоль выкидывал этот самый data.is_unified, и оно менялось, но v-if на это было все равно.

[Alex Wells]

ой всё, во первых, я не ТС.

Во-вторых, назовите другие варианты, раз вы упомянули о них.

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

[Alex Wells]

ой всё, я начал троллить? Вам я писал два раза, а недо-троллинг вы начали еще три сообщения назад.

И я ни на что не обижаюсь. Мне смешно видеть таких людей, как вы, и еще смешнее слышать от них, что я злюсь/страдаю/обижаюсь =)

Какие приказы? Какое хамство? Оставляйте цитаты, если уж решили потыкать пальцем в небо.

Про инфантилизм - ну да, это же не вы начали орать про if, ajax и циклы, при этом приводя ровно ноль аргументов. А без них ваши слова - водичка, ровно как и вы сами.

И на последок: это конечно верх наглости - удалять свои комментарии а потом безобоснованно обвинять других.

[Alex Wells]

ой всё, видимо, кроме вас =)

[Роман]

Alex Wells, в общем проверил геттер, получается при изменении data в computed само состояние в vuex не меняется (видимо, из-за вложенности). Но при этом в самом computed все меняется.
По большому счету мне не требуется, чтобы изменения сразу улетали во vuex, т.к. для сохранения все равно предусмотрена кнопка подтверждения.
Но v-if, тем не менее, не работает(

Answer 1

[Demin_Nick]

Тоже столкнулся с этим, но нашел ответ:
https://medium.com/devschacht/%D1%80%D0%B5%D0%B0%D...

в твоем случае нужно присваивать новое значение через Vue.set
Vue.set(checkboks, 'state', 1)

надеюсь поможет

Answer 2

[0xD34F]

одно из вложенных свойств через v-model привязывается к чекбоксу
<...>
при попытке прописать v-if с использованием этого свойства, при его изменении ничего в DOM не меняется

Раз ничего не меняется, значит, на самом деле этого свойства изначально нет, оно добавляется через v-model, при первом изменении состояния чекбокса. А vue, как известно, не может обнаружить добавление свойства объекта. Так что это свойство, чтобы оно стало реактивным, должно изначально присутствовать в объекте, и, раз оно используется для задания состояния чекбоска, то пусть дефолтным значением будет false.

UPD. Или можно обновить используемую версию vue на 2.5.0 или выше, там v-model добавляет отсутствующие свойства как реактивные.