Method "getChampionName" has type "undefined" in the component definition. Did y-CodePudding

I'm trying to use this function (src/api/)

function getChampionName(champId) {
  axios.get('http://ddragon.leagueoflegends.com/cdn/12.5.1/data/en_US/champion.json')
    .then(({ data }) => {
      let list = data
      let championList = list.data
      for (var i in championList) {
        if (championList[i].key == champId) {
          return championList[i].id
        }
      }
    })
    .catch((err) => console.log(err))
}

export {getChampionName}

In this component (src/components/)

<template>
  <div >
    <header >
      <p>Champion's Mastery</p>
    </header>
    <ul >
      <li v-for="champ in masteryData.slice(0,10)" :key="champ.championId">
        <div >
          <div >
            <img src="https://ddragon.leagueoflegends.com/cdn/12.5.1/img/champion/Karma.png" alt="" >
            <div>
              <p >{{ getChampionName(champ.championId) }}</p>
              <p>Level {{ champ.championLevel }}</p>
            </div>
          </div>
          <p >{{ champ.championPoints }} Pts</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import getChampionName from '@/api/search'

export default{
  name: 'MasteryInfo',
  props: [
    'masteryData'
  ],
  methods: {
    getChampionName
  }
}
</script>

But I'm getting this error Method "getChampionName" has type "undefined" in the component definition. and don't know what does it mean.

CodePudding user response：

It seems you didn't import the method properly. Change the import into:

import { getChampionName } from '@/api/search';

You can read more about import export in javascript here: https://javascript.info/import-export

If you think you almost have the same question as this question, you can also refer to this: Method "showDate" has type "undefined" in the component definition