VueJS: variable is undefined inside computed only

Question

I'm trying to make async autocomplete input with Vue, Nuxt, Axios and Buefy. It basically works, but I need to have different strings when user just starts typing and there's yet nothing to show, and when there is nothing found for such request.

I'm checking in computed variable if input value isn't empty and axios returns empty array to handle if the request address cannot be found. But it causes error

Cannot read property 'length' of undefined

The weird thing is that address variable is successfully used in other parts of my component.

My vue file below:

<template lang="pug">
b-field(label="Your address?")
    b-autocomplete(
    rounded,
    v-model="address",
    :data="data",
    placeholder="Start typing",
    icon="magnify",
    @input="getAsyncData",
    @select="option => selected = option",
    :loading="isFetching"
    )
        template(slot="empty") {{ dummyText }}
</template>

<script>
import axios from 'axios'
import debounce from 'lodash/debounce'

export default {
    data() {
        return {
            data: [],
            address: '',
            selected: null,
            isFetching: false,
            nothingFound: false,
            test: false
        }
    },

    computed: {
        dummyText: () => {
            if (this.address.length > 0 && this.nothingFound) { // This will return error
                return 'There is no such address'
            } else {
                return 'Keep typing'
            }
        }
    },

    methods: {
        getAsyncData: debounce(function () {
            this.isFetching = true

            axios.post('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address', {
                "query": this.address,
                "count": 8
            }, {
                headers: {
                    'Authorization': 'Token sometoken',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                }
            })
                .then(response => {
                    this.isFetching = false
                    this.data = Object.values(response.data.suggestions)
                    if (response.data.suggestions.length===0) this.nothingFound = true
                    console.log(this.address.length) // This will work
                })
                .catch(error => {
                    this.isFetching = false
                    console.log(error);
                })
        }, 300)
    }
}
</script>

This is not about ssr, I've tried to init component inside mounted hook. Think I'm missing out something obvious, but I've already spent hours trying to fix this without success

Are you allowed to have a data field named 'data'? Sounds like you might be accidentally clearing wiping out other data fields on accident, which is why address is undefined until it is set with the v-model? — Aaron Pool
– Aaron Pool, Commented May 9, 2018 at 19:00

Sphinx · Accepted Answer · 2018-09-24 22:20:35Z

74

Don't use arrow function ()=>{} for computed, it will cause the wrong context (not current Vue instance).

Change to function () {} then it should work fine.

And for methods, watch, you should follow same rules.

computed: {
    dummyText: function () { // change to function () {}
        if (this.address.length > 0 && this.nothingFound) { // This will return error
            return 'There is no such address'
        } else {
            return 'Keep typing'
        }
    }
},

edited Sep 24, 2018 at 22:20

answered May 9, 2018 at 19:04

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Artem Gorlachev · Accepted Answer · 2018-11-16 08:20:05Z

13

You can also use es2015 shorthand for a method function:

computed: {
    dummyText() {
        return this.address.length > 0 && this.nothingFound ? 'There is no such address' : 'Keep typing';
    }
}

answered Nov 16, 2018 at 8:20

Artem Gorlachev

6175 silver badges9 bronze badges

1 Comment

Denis Over a year ago

Eslint expects this: Expected method shorthand

tony19 · Accepted Answer · 2022-07-16 00:02:14Z

5

The Vue Documentation states not to use arrow functions on a property or callback.

You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the computed property as arrow functions are bound to the parent context and this.address is undefined. Same would happen if you use arrow function for methods.

Use regular function:

dummyText: function () {
    console.log(this.address)
}

Or use ES5 shorthand:

dummyText() {
    console.log(this.address)
}

Or If you want to keep using the arrow function, you could pass the component instance (this) as parameter because computed properties receive component instance as their first argument. :

dummyText : ctx => console.log(ctx.address)

edited Jul 16, 2022 at 0:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 29, 2021 at 15:40

Noor Ul Ain

6107 silver badges9 bronze badges

Collectives™ on Stack Overflow

VueJS: variable is undefined inside computed only

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related