Как изменить данные при изменении вычисляемого свойства? - PullRequest
Новая
       10

Как изменить данные при изменении вычисляемого свойства?

0 голосов
/ 11 января 2019

В моем шаблоне vue.js у меня есть навигационный компонент «всплывающее окно / модальный», который переключается по щелчку пользователя. Положение по умолчанию для этой панели навигации закрывается, однако, когда определенное вычисляемое свойство (в данном случае после ответа на некоторые вопросы) оценивается как истинное, я хочу, чтобы позиция по умолчанию была «всплывающей» без потеря способности переключения модального компонента.

Я пытался напрямую изменить данные в вычисляемом свойстве, но с тех пор узнал (оглядываясь на SO), что это плохая практика. После некоторых исследований выяснилось, что установка наблюдателя, который вызывает метод, когда вычисляемое свойство allAnswered возвращает true, была подходящим способом, но я не могу заставить это работать вообще.

Это часть гораздо большего шаблона, поэтому я прилагаю соответствующие части кода ниже: 

<template>
    <div class="m-btn__nav" @click="showNav = true"><h4>Where to?</h4></div>
    <Navigation v-if="showNav" @close="showNav = false"></Navigation>
</template>
<script>
export default {
    data () {
        return {
            showNav: false
        }
    },
    computed: {
        allAnswered () {
            let q = this.getRoomQuestions(1)
            let a = []
            for (let index = 0; index < q.length; ++index) {
                a.push(q[index].answered)
            }
            if (Object.keys(a).every(i => a[i])) {
                return true
            } else {
                return false
            }
        }
    },
    watch: {
        allAnswered: function (n) {
            this.updateNav()
        }
    },
    methods: {
        updateNav: function () {
          this.showNav = true
        }
    }
}
</script>

Я ожидал, что наблюдатель allAnswered сработает, когда вычисленное свойство allAnswered изменится с возврата false на true, и вызовет метод updateNav для изменения данных showNav. В результате, даже когда вычисляемое свойство allAnswered переоценивается, оно не вызывает наблюдателя / метод и не изменяет данные.

1 Ответ

0 голосов
/ 11 января 2019

Вычисленные ТОЛЬКО оцениваются при использовании. Вы не используете свой вычисленный allAnspted (), поэтому вывод не меняется. Попробуйте поместить его в шаблон или на крючок ().

...