时间戳

首页 > 解决方案 > vue计算属性无法获取数据

javascript - vue计算属性无法获取数据

问题描述

我目前遇到computed()属性无法获取数据的问题。尽管数据已经在created()属性中启动。我做错了吗？请告知我如何解决此问题。

const randomPlayers = {
    template:
    `
    <input type="text" v-model="search_player">
    <div v-for="player in modPlayers" v-if="list_of_random_players!=null">
        <p>{{player.firstname}}</p>
        <p>{{player.lastname}}</p>
    <div>

    `,
    props: ['data'],
    data (){
        return{
        list_of_random_players: null,
        search_player: null
        }
    },
    created(){
        this.get_random_players()
    },
    computed: {
        modPlayers(){
            return this.list_of_random_players.filter( person => {
              return !this.search_player ||
                ( person.firstname.toLowerCase().indexOf(this.search_player.toLowerCase()) > -1 || person.lastname.toLowerCase().indexOf(this.search_player.toLowerCase()) > -1) 
            })
        }
    },
    methods: {
        get_random_players: function(){
            $.post(
                url:'random_url'
                data: {
                    players: data
                }
            ).done((success)=>{
                this.list_of_random_players: JSON.parse(success)
            })fail((err)=>{
                console.log(err)
            })
        }
    }
}

我收到以下两个错误：

(1)TypeError: Cannot read property 'filter' of null

(2)TypeError: this.list_of_random_players.filter is not a function

标签： javascriptvue.jsvuejs2vue-component

解决方案

来自Vue：“创建 Vue 实例时，它会将在其数据对象中找到的所有属性添加到 Vue 的反应系统中。当这些属性的值发生变化时，视图将“做出反应”，更新以匹配新值。”

返回对象data的函数也是如此，但正如@Sovalina 所提到的，您没有返回它，因此您无法访问其属性。您需要添加并更改为：returnnull[]

data() {
    return {

          list_of_random_players: [],
           search_player: []
    }
 },

或者你可以不用return和喜欢一个普通的对象：

data: {
     list_of_random_players: [],
         search_player: []
  }

当你的 Vue 组件被多次使用时，最好像函数一样使用它（第一种情况）。

“定义组件时，必须将数据声明为返回初始数据对象的函数。为什么？因为将使用相同的定义创建许多实例。如果我们仍然使用普通对象作为数据，那么相同的对象将被共享通过引用创建的所有实例！通过提供数据函数，每次创建新实例时，我们都可以调用它以返回初始数据的新副本。参考：链接

这可能只是一个错字，但您也需要:添加methods。

推荐阅读