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についてではなく、マウントされたフック内でコンポーネントを初期化しようとしました。私は明白な何かを見逃していると思うが、すでに成功せずにこれを修正しようとして何時間も費やしている
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'
}
}
},
_
メソッド関数のes2015ショートハンドを使用することもできます。
computed: {
dummyText() {
return this.address.length > 0 && this.nothingFound ? 'There is no such address' : 'Keep typing';
}
}