vue components doesn't return value

Viewed 24

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);
0 Answers
Related