web-dev-qa-db-ja.com

VueJS：変数は計算のみで未定義です

Vue、Nuxt、Axios、Buefyで非同期オートコンプリート入力をしようとしています。基本的には機能しますが、ユーザーが入力し始めたばかりで表示するものが何もない場合、およびそのようなリクエストに何も見つからない場合は、異なる文字列が必要です。

入力値が空ではない場合、計算された変数をチェックインします。リクエストアドレスが見つからない場合、axiosは空の配列を返します。しかし、それはエラーを引き起こします

未定義のプロパティ「長さ」を読み取れません

奇妙なことに、address変数がコンポーネントの他の部分で正常に使用されています。

My vue以下のファイル：

<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>

これはssrについてではなく、マウントされたフック内でコンポーネントを初期化しようとしました。私は明白な何かを見逃していると思うが、すでに成功せずにこれを修正しようとして何時間も費やしている

vue.jsnuxt.js
8
Elijah Ellanski

computedに矢印関数_()=>{}_を使用しないでください。間違ったコンテキストを引き起こします（現在のVueインスタンス）ではありません）。

function () {}に変更すると、正常に機能するはずです。

methods、watchについても、同じルールに従う必要があります。

_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'
        }
    }
},
_
23
Sphinx

メソッド関数のes2015ショートハンドを使用することもできます。

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