I have created this component and use $emit to call getNames from other file:
<div class="mt-1 relative rounded-md shadow-md">
<input
v-model="ticker"
@keydown.enter="addClick"
@input="getNames"
type="text"
name="wallet"
id="wallet"
class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
placeholder="DOGE"
/>
</div>
<div class="flex bg-white shadow-md p-1 rounded-md shadow-md flex-wrap">
<span
class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer"
v-for="t of getNames()"
:key="t.name"
@click="pushName(t)"
>
{{ t }}
</span>
</div>
import addButton from "./addButton.vue";
export default {
components: {
addButton,
},
data() {
return {
ticker: "",
};
},
methods: {
addClick() {
this.$emit("add-ticker", this.ticker);
this.ticker = "";
},
getNames(){
this.$emit("get-name", this.ticker);
}
It's working but it doesn't return value to my component and I don't get list of names, it worked successful without component. In other file i have this code:
<add-ticker @get-name="getNames" @add-ticker='addClick'/>
getNames(ticker) {
let filtred = this.coinNames.filter((filtered) =>
filtered.toUpperCase().startsWith(ticker.toUpperCase())
);
console.log(filtred.slice(0,4))
return filtred.slice(0, 4);