Vuejs : Component not Re-rendering when a data property changes

Question

I have a property of type Boolean - websiteHasCode which takes a value from store. I want to render html in the page conditionally using websiteHasCode ( true or false ) , Initially the component A is fine ( correct value for websiteHasCode ). There is a modal in the page , which is child component B of component A, The modal has the functinality of updating the store value - isCodeActive. So when it updates I want the variable websiteHasCode to also update and eventually the Dom, So I used a watcher and computed as in this SO question, But it doesn't seem to update. Can anyone help what i got wrong here ?

<template> 
  <div>
    <div v-if="websiteHasCode">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>


<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean,
            }
        },
        mounted() {
            this.websiteHasCode = this.$store.state.isCodeActive;
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
        watch: {
          isCodeActive: {
            handler() {
              console.log(this.websiteHasCode) // returns false
              this.websiteHasCode = this.$store.state.isCodeActive;
              console.log(this.websiteHasCode) // returns true but dom does not re-render
            },
            deep: true
          },
        },
      }
</script>

Also is this the best way to watch state changes , are there any better ways ?

I'm not sure I understand what you want to do. Maybe it will help this.$forceUpdate() If not, it would help me if you would add code to codePen — Grzesiek
– Grzesiek, Commented Sep 7, 2020 at 11:31
what about using isCodeActive directly like <div v-if="isCodeActive">? — Sphinx
– Sphinx, Commented Sep 7, 2020 at 11:57
Also you should initialize the websiteHasCode property in the data function — sebasaenz
– sebasaenz, Commented Sep 7, 2020 at 12:14
@Sphinx Do you mean like v-if="$store.state.isCodeActive" ? Its a value in store right ? — theFrontEndDev
– theFrontEndDev, Commented Sep 7, 2020 at 12:30
@theFrontEndDev no problem! I think Sphinx meant that you should use directly the computed property you declared as isCodeActive in the v-if. — sebasaenz
– sebasaenz, Commented Sep 7, 2020 at 12:41

matejmachac · Accepted Answer · 2020-09-07 12:58:30Z

Unless you want to do something else based on the value of isCodeActive, there's no point in using a watcher for the computed, just use the computed directly in your v-if like so:

<template> 
  <div>
    <div v-if="isCodeActive">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>
    

<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean, // not sure why you're initializing with "Boolean" here, it should be false
            }
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
      }
</script>

Also, you're initializing your websiteHasCode property as "Boolean' instead of false. Might be that vue sees this as a truthy value and does not update the layout because of that.

Collectives™ on Stack Overflow

Vuejs : Component not Re-rendering when a data property changes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related