One line condition not working in data in Vue js

Question

I have a component that is going to have data named isVendorOrAgent that should be false or true based on a property that the component gets. When I put this condition on the data section of the component, it doesn't work and always returns false but when I put that in created() and change the isVendorOrAgent in created(), it works.

How can I make this work?

This is the condition that is not working:

data : () => {
   return {
      isVendorOrAgent : (this.entityName == "vendor" || this.entityName == "agent") ? true : false;
   }
}

but this works when the default is false:

created(){
    if(this.entityName == "vendor" || this.entityName == "agent"){
      this.isVendorOrAgent = true;
    }
  }

Answer 1

Try this code sample:

data () {
  return {
    isVendorOrAgent: Boolean(this.entityName === "vendor" || this.entityName === "agent")
  }
}

What is different?

1. Now data is not an arrow function, because arrow functions do not change the context, so this won't be what it should be inside the component
2. We now store a Boolean value
3. We are now using strict equality ===, which is just a good habit

You may also take a look at computed properties: https://v2.vuejs.org/v2/guide/computed.html

Your problem could be solved like this:

computed () {
  return {
    isVendorOrAgent: Boolean(this.entityName === "vendor" || this.entityName === "agent")
  }
}

The second way is preferable if you need this property to be reactive.