32

If I have a two computed properties like this,

computed: {
  id: function(){ return this.$route.query.id; },
  hasId: function(){ return this.$route.query.id !== undefined; }
}

how can I use id to compute hasId like this pseudo-code?

computed: {
  id: function(){ return this.$route.query.id; },
  hasId: function(){ return id !== undefined; }
}
3
  • 5
    return id -> return this.id() fixes your problem
    – aaaaaa
    Dec 15, 2016 at 22:05
  • 1
    Why don't you post it as a reply so it can get accepted? Dec 15, 2016 at 22:20
  • 2
    because you can't downvote a comment and there are often gotchas in the OP's question that are only known via clarification
    – aaaaaa
    Dec 15, 2016 at 22:28

3 Answers 3

30

You need to use correct scope to access a vue computed property.

as you are using just id, it will search it in global scope and not find it and will return undefined. For getting vue computed property, you need to do: this.id, so your code will look like following:

computed: {
  id: function () { return this.$route.query.id; },
  hasId: function () { return this.id !== undefined; }
}

Inside a component, this refers to our Vue instance. However you can access $route and other similar function from this, as they are defined at Vue.prototype, see below code from vue-router:

 Object.defineProperty(Vue.prototype, '$route', {
    get: function get$1 () { return this.$root._route }
 })
3
  • I don't get it. Please take a look at my comment to the other reply by @aaaaaa if you have time. this.id() should refer to the base Vue object and not the currently created component, according to my understanding. I'm sure I'm missing something but what? Dec 16, 2016 at 8:21
  • @KonradViltersten updated the answer, let me know if it answers your query.
    – Saurabh
    Dec 16, 2016 at 8:41
  • 1
    this is a very misused construct in javascript. Vue really shouldn't be messing with this in confusing instances such as a 'computed' object.
    – aaaaaa
    Dec 16, 2016 at 8:46
6

your pseudo code was very close. Just change id to this.id

computed: {
  id: function(){ return this.$route.query.id; },
  hasId: function(){ return this.id !== undefined; }
}
4
  • I don't understand why it's working. According to everything I've read, in this context this refers to the Vue object and not the component instance itself (that's why e.g. this.$route works and that's the reason I can't use the new JS syntax prop:()=>{...}). I'd guess that this.id() would refer to some property id in the root Vue object too... What am I missing, please? Dec 16, 2016 at 8:19
  • I can't speak to vuejs, but this refers to the object whose properties it owns. In the case of hasId, this refers to computed. Also if you want to use new js syntax, then hasId() { return this.id() !== undefined; } would be the way to go.
    – aaaaaa
    Dec 16, 2016 at 8:38
  • 1
    I don't think the this.id() as a function call is correct
    – mix3d
    Aug 2, 2018 at 14:24
  • You're right, and thanks - I've since used vue and vue decided these should be magically turned into getter properties as opposed to functions, even though they are written as functions. I disagree with the design choice but such is vue.
    – aaaaaa
    Aug 3, 2018 at 17:55
-1

I had the same issue, and I simply resolved it using a watcher. Hope it helps:

 <div id="app">
  <label> true or false
   <input v-model="checkbox" type="checkbox">
  </label>   
</div>

<script>
new Vue({
    el: '#app',
    data: {
      checkbox: false,
    },

    computed: {

      checkboxComputed(){
        return this.checkbox;
      },

      lonelyComputed(){
        console.log('who bothers?');
        }
      },

    watch: {

      checkboxComputed(value){
        if(value){
          console.log('checkboxComputed is changed!')
          return this.lonelyComputed;
        }
      }
    }
});

</script>
1
  • 5
    I resolved all of my issues with Vue in one radical move. I switched to Angular, hehe. Somehow, it works out much better for me. Not sure if it's the framework or just me, so I'm not complaining about Vue. Just that my problems went byebye after the switch, hahaha. Sep 12, 2019 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.