How come when I use "includes" in Vue with my v-model, Vue.js logs an error? However, if I write (.includes("blabla)), everything works fine.
What could be the issue?
Also, how can I return the entire array if the (if) condition will work?
For example, something like this.emojiesByCategory.push() ?
Please assist me with this.
<template>
<div id="app">
<div class="emoji_picker">
<div class="picker_container">
<input v-model="search">
<div class="category"
v-for="category in categories"
:key="`category_${category}`"
>
<span>{{ category }}</span>
<div class="emojis_container">
<button
v-for="(emoji, index) in category_emojis(category)" // ERROR HERE
:key="`emoji_${index}`"
>
{{ emoji }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import data from '../data.json'
export default {
name: 'App',
data() {
return {
search: "",
emojiesByCategory: ""
}
},
computed: {
categories() {
return Object.keys(data);
},
category_emojis: () => (category) => {
for (let i = 0; i < Object.keys(data[category]).length; i++) {
if (Object.keys(data[category])[i].includes(this.search)) { // ERROR THERE !!!
console.log(Object.values(data[category])[i])
}
return Object.values(data[category])
}
},
}
</script>
// How do I fix this?
My JSON looks like:
{
"Frequently used": {
"confused": "😕",
"neutral_face": "😐",
"blush": "😊",
"heart_eyes": "😍"
},
// and others
}
Please lend me a hand