如何构建vue.js应用程序，以便我可以在页面加载时从计算属性访问ajax请求数据

Question

I have the following code (below) that lets a user search data in an array. I want to replace the data property with data from an api and I don't know the proper way to structure a vue.js app so the methods have access to ajax data that is called on page load .

I know I use the axios library to call the data.

Vue.axios.get('https://jsonplaceholder.typicode.com/posts/1').then((response) => {
  console.log(response.data)
})

MY CODE

https://jsfiddle.net/bny191f7/1/

Vue.js code

new Vue({
  el: '#app',
  data: {
    searchString: "",


    users: [{         //____________I want to replace this data with api data
        "name": "Bob"
      },

      {
        "name": "Angel"
      },

      {
        "name": "Whatever"
      }


    ]
  },
  computed: {

    filterUsers: function() {  //___________And insure this has access to it
                               //___________so the app continues to work
      var users_array = this.users,
        searchString = this.searchString;

      if (!searchString) {
        return users_array;
      }

      searchString = searchString.trim().toLowerCase();

      users_array = users_array.filter(function(item) {
        if (item.name.toLowerCase().indexOf(searchString) !== -1) {
          return item;
        }
      })

      return users_array;;
    }
  }
});

HTML

<form id="app" v-cloak>

    <input type="text" v-model="searchString" placeholder="Enter your search terms" />


<ul>

    <li v-for="user in filterUsers">

        <p>{{user.name}}</p>
    </li>
</ul>

Answer 1

I figured it out.

VUE

    new Vue({
    el: '#app',
    data: {
        searchString: "",


        users: undefined
    },

    mounted: function () {
                Vue.axios.get('https://jsonplaceholder.typicode.com/posts')
                    .then(response => {
                        console.log(response);
                        this.users = response.data;
                        console.log(this.users);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
    computed: {

        filterUsers: function () {
            var users_array = this.users,
                searchString = this.searchString;

            if(!searchString){
                return users_array;
            }

            searchString = searchString.trim().toLowerCase();

            users_array = users_array.filter(function(item){
                if(item.title.toLowerCase().indexOf(searchString) !== -1){
                    return item;
                }
            })

            return users_array;;
        }
    }
});

HTML

    <form id="app" v-cloak>

        <input type="text" v-model="searchString" placeholder="Enter your search terms" />


    <ul>

        <li v-for="user in filterUsers">

            <p>{{user.title}}</p>
        </li>
    </ul>

</form>