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

Posted 2021-12-16 王同学要努力

【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>