Question

我目前遇到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

Answer 1

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

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

data() {
    return {

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

或者您也可以不使用return而像常规对象一样进行操作：

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

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

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

这可能只是拼写错误，但您还需要向:添加methods。

vue计算的属性无法获取数据

1 个答案: