Question

10

How to access data from computed property Vue.js

rated 0 times [ 11] [ 1] / answers: 1 / hits: 17257 / 7 Years ago, fri, march 17, 2017, 12:00:00

I'm using Vue.js and when I try to access a variable from data inside a computed property, it returns undefined.
Here's the code:

    <script>

     export default {

       name: 'app',

       data: () => {

         return {

           lang: 'sp'

         }

       },

       computed: {

         langEn: () => this.lang === 'en',

         langSp: () => this.lang === 'sp'

       }

     }

    </script>

This is in a NPM project. And inside a .vue file. Maybe it behaves differently when used like this?

Thanks for the help

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

havenbilliec questions

1 Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Thu, Mar 3, 22, 00:00, 2 Years ago

1 React Big Calendar - Is it possible to click on a day and retrieve a list of events on that day?

Fri, Feb 11, 22, 00:00, 2 Years ago

1 Warning: A component is changing a controlled input to be uncontrolled in React js

Fri, May 7, 21, 00:00, 3 Years ago

1 Error: Cannot find module nuxt.js, why my app don't start?

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Redirecting to another html page after successful login attempt

Wed, Nov 25, 20, 00:00, 4 Years ago

View All

answered 7 Years ago keyonna · Accepted Answer

This is a very common "gotcha".

Do not use a fat arrow when defining your computed.

When you use a fat arrow to define your computed, methods, or data, you capture this lexically and it will point to the containing scope (which is often window or undefined) and not your Vue.

<script>

   export default {

     name: 'app',

     data() {

       return {

         lang: 'sp'

       }

     },

     computed: {

       langEn() { return this.lang === 'en' },

       langSp() { return this.lang === 'sp' }

     }

   }

</script>