[Vuejs]-V-if per component when loaded

by

0👍

The point of a computed is to cache your data, the way you are using it though, it would require it to be called.

here are some options…

1 use computed

use computed as intended, by returning the value:

    data () {
        return {}
    },

    computed: {
        link: function() {
            return this.featured.id.featureButtonLink != '';
        }
    }

2 use a watch

    data () {
        return {
            link: false
        }
    },

    watch: {
      featured:{
        immediate: true
        handler: function(val) {
            if (val.id.featureButtonLink != '') {
                this.link = true
                return this.link
            }
        }
      }
    }

3 use mounted lifecycle hook

If the prop does not change is being rendered one-time based on passed prop value, there is little benefit to using a computed. Instead, you could just use the mounted lifecycle hook, which would make it run only when it’s being mounted. This means it wouldn’t react to changes in the value, so I won’t show the example.

Leave a comment