[JavaScript知识库]【Vue2.0】—github小案例（二十三）

【Vue2.0】—github小案例（二十三）

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyWord" />&nbsp;
      <button @click="sendData">Search</button>
    </div>
  </section>

</template>

<script>
  import axios from 'axios'
  export default {
    name: 'Search',
    data() {
      return {
        keyWord: ''
      }
    },
    methods: {
      sendData() {
        //请求前更新List里面的数据
        this.$bus.$emit('updateListData', {
          isLoading: true,
          errMsg: '',
          users: [],
          isFirst: false
        })
        axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
          response => {
            console.log('请求成功');
            //请求成功后更新数据
            this.$bus.$emit('updateListData', {
              isLoading: false,
              errMsg: '',
              users: response.data.items
            })
          },
          error => {
            //请求失败后更新数据
            this.$bus.$emit('updateListData', {
              isLoading: false,
              errMsg: error.message,
              users: []
            })

          }
        )
      }
    }
  }

</script>

<style>

</style>