Vue.js .toLowerCase() 不是函数答案

【问题标题】：Vue.js .toLowerCase() is not a fucntionVue.js .toLowerCase() 不是函数
【发布时间】：2021-01-13 14:06:09
【问题描述】：

我是 vue.js 的新手。

我想知道是否有人可以告诉我哪里出错了。

我试图让我的数据中的值以小写形式出现，但我不断收到以下错误。

vue:6 TypeError: player.nat.toLowerCase 不是函数

这是我的 HTML：

<img class="player-nat-flag" v-bind:src="'https://assets.ocs-sport.com/flags/svg/flag_' + players.nat.toLowerCase() + '.svg'">

这是我的 Vue.js 代码：

new Vue({
    el: '#app',
    data () {
        return {
            searchQuery: null,
            info: null,
            loading: true,
            errored: false
        }
    },
    mounted () {
    axios
      .get('')
      .then(response => {
        this.info = response.data.player
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
    },
    computed: {
        resultQuery(){
              if(this.searchQuery){
              return this.info.filter((players)=>{
                return this.searchQuery.toLowerCase().split(' ').every(v => players.full_name.toLowerCase().includes(v))
              })
              }else{
                return this.info;
              }
        },
        info(){
              return this.info.filter((players)=>{
                return this.info.toLowerCase().split(' ').every(v => players.nat.toLowerCase().includes(v))
              })
        }
    }
})

【问题讨论】：

您的模板中有players.nat.toLowerCase()，而data 或computed 中没有players。你期待什么？

标签： vue.js axios

【解决方案1】：

似乎players 不是您的数据或计算变量中的变量。因此它在您的 HTML 模板中不可用。

尝试添加如下内容：

...
computed: {
    players() {
        // get your player data here
        let response = this.foo();
        return response;
    }
}
...

这样players 将在您的 HTML 模板中可用

【讨论】：