{"id":542,"hash":"fd62a1f8e3230cb577535422df8ad9497b2b4c100c1ec801f7bfbaec8a6092b0","pattern":"VueJS: variable is undefined inside computed only","full_message":"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.\n\nI'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 \n\n  Cannot read property 'length' of undefined\n\nThe weird thing is that address variable is successfully used in other parts of my component.\n\nMy vue file below:\n\n<template lang=\"pug\">\nb-field(label=\"Your address?\")\n    b-autocomplete(\n    rounded,\n    v-model=\"address\",\n    :data=\"data\",\n    placeholder=\"Start typing\",\n    icon=\"magnify\",\n    @input=\"getAsyncData\",\n    @select=\"option => selected = option\",\n    :loading=\"isFetching\"\n    )\n        template(slot=\"empty\") {{ dummyText }}\n</template>\n\n<script>\nimport axios from 'axios'\nimport debounce from 'lodash/debounce'\n\nexport default {\n    data() {\n        return {\n            data: [],\n            address: '',\n            selected: null,\n            isFetching: false,\n            nothingFound: false,\n            test: false\n        }\n    },\n\n    computed: {\n        dummyText: () => {\n            if (this.address.length > 0 && this.nothingFound) { // This will return error\n                return 'There is no such address'\n            } else {\n                return 'Keep typing'\n            }\n        }\n    },\n\n    methods: {\n        getAsyncData: debounce(function () {\n            this.isFetching = true\n\n            axios.post('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address', {\n                \"query\": this.address,\n                \"count\": 8\n            }, {\n                headers: {\n                    'Authorization': 'Token sometoken',\n                    'Content-Type': 'application/json',\n                    'Accept': 'application/json',\n                }\n            })\n                .then(response => {\n                    this.isFetching = false\n                    this.data = Object.values(response.data.suggestions)\n                    if (response.data.suggestions.length===0) this.nothingFound = true\n                    console.log(this.address.length) // This will work\n                })\n                .catch(error => {\n                    this.isFetching = false\n                    console.log(error);\n                })\n        }, 300)\n    }\n}\n</script>\n\nThis 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","ecosystem":"npm","package_name":"vue.js","package_version":null,"solution":"Don't use arrow function ()=>{} for computed, it will cause the wrong context (not current Vue instance).\n\nChange to function () {} then it should work fine.\n\nAnd for methods, watch, you should follow same rules.\n\ncomputed: {\n    dummyText: function () { // change to function () {}\n        if (this.address.length > 0 && this.nothingFound) { // This will return error\n            return 'There is no such address'\n        } else {\n            return 'Keep typing'\n        }\n    }\n},","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/50260260/vuejs-variable-is-undefined-inside-computed-only","votes":29,"created_at":"2026-04-19T04:51:19.428663+00:00","updated_at":"2026-04-19T04:51:19.428663+00:00"}