VueJS:变量仅在计算内部未定义

Question

我正在尝试使用 Vue、Nuxt、Axios 和 Buefy 进行异步自动完成输入。它基本上有效，但是当用户刚刚开始输入并且没有任何可显示的内容时，以及当找不到此类请求时，我需要有不同的字符串。

如果输入值不为空，我正在检查计算变量，并且 axios 返回空数组以在找不到请求地址时进行处理。但它会导致错误

无法读取未定义的属性"长度">

奇怪的是address变量在我的组件的其他部分中成功使用。

我的 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 无关，我尝试在挂载的钩子内初始化组件。认为我错过了一些明显的东西，但我已经花了几个小时试图解决这个问题但没有成功

Answer 1

不要对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'
}
}
},

Answer 2

您还可以将 es2015 简写用于方法函数：

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

Answer 3

Vue 文档声明不要在属性或回调上使用箭头函数。

您面临此错误是因为箭头函数不会将其绑定到您为其定义计算属性的 vue 实例，因为箭头函数绑定到父上下文，并且 this.address 未定义。如果对方法使用箭头函数，也会发生同样的情况。

使用常规函数：

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

或者使用 ES5 速记：

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

或者，如果要继续使用箭头函数，可以将组件实例 (this( 作为参数传递，因为计算属性将组件实例作为其第一个参数接收。

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