問題

本人在Ajax方面純小白，所以在使用axios時犯了個很簡單的錯誤

我想通過API返回資料後接著執行父元件的一個函式

一開始的程式碼

<script>
import axios from 'axios'

  export default {
    data() {
      return {
        list: '',
        length: '',
      };
    },
    methods: {
        getList(){
            axios
                .get('api_url')
                .then(response => (
                    this.list = response.data['list'],
                    this.length = response.data['length'],
                    )
                )
            
            this.$emit('next_fuc', this.list, this.length),
        },
    }
  };
</script>
 

結果就是明明接收到了資料，傳給next_fuc函式的值卻是空值

解決

這是因為Ajax是非同步操作，還沒有等返回資料就已經執行了this.$emit('next_fuc', this.list, this.length)

把需要等待資料返回的操作放在.then裡就可以解決

<script>
import axios from 'axios'

  export default {
    data() {
      return {
        list: '',
        length: '',
      };
    },
    methods: {
        getList(){
            axios
                .get('api_url')
                .then(response => (
                    this.list = response.data['list'],
                    this.length = response.data['length'],

                    this.$emit('next_fuc', this.list, this。length),
                    )
                )  
        },
    }
  };
</script>
 

本文最新版本