When using Nuxt 3, I encountered a TypeError that looks like the following:
Uncaught TypeError: n2 is not a function
My issue revolves around a button that triggers the function toggleSelectRow with a @click.prevent directive.
The function in question is as follows:
const toggleSelectRow = (keyword) => {
if (keywordsSelected.value.find((kw) => kw.uid_kw === keyword.uid_kw) && props.keywords.length > 1) {
keywordsSelected.value = []
nuxtApp.$bus.$emit('filter-from-list', '');
} else {
keywordsSelected.value = [keyword]
nuxtApp.$bus.$emit('filter-from-list', keyword.uid_kw);
}
}
On the receiving end, we have the following code:
$bus.$on('filter-from-list', (newKeyword) => { filters.keyword = (props.keywords.find((kw) => kw.uid_kw === newKeyword)) ? newKeyword : null if (!filters.keyword) {
refreshNuxtData('average-keyword-position');
return; }
fetchKeywordPosition({ keyword: newKeyword }); });
In the provided snippet, nuxtApp is defined earlier with : const nuxtApp = useNuxtApp();
A potential solution was attempted by declaring a function in the receiver component like so:
function filterFromList(newKeyword){
filters.keyword = (props.keywords.find((kw) => kw.uid_kw === newKeyword)) ? newKeyword : null
if (!filters.keyword) {
refreshNuxtData('average-keyword-position');
return;
}
fetchKeywordPosition({ keyword: newKeyword });
}
This function was then called using :
$bus.$on('filter-from-list', filterFromList);