實作Twilio Vue.js教程的方法

Question

我嘗試遵循這個 Twilio 教程： https://www.twilio.com/blog/create-video-conference-app-laravel-php-vue-js

由於它是基於 Laravel 6，我在 2022 年遇到了一些錯誤。 我已經透過新增 AccessTokenController 的完整命名空間來修復路由

但是在教程中，我被要求「將welcome.blade.php中的程式碼替換為以下內容：」

...
<script>
export default {
    name: 'video-chat',
    data: function () {
        return {
            accessToken: ''
        }
    },
    methods : {
        getAccessToken : function () {

            const _this = this
            const axios = require('axios')
            
            // Request a new token
            axios.get('/api/access_token')
                .then(function (response) {
                    _this.accessToken = response.data
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    console.log( _this.accessToken )
                });
        }
    },
    mounted : function () {
        console.log('Video chat room loading...')

        this.getAccessToken()
    }
}
</script>

但我認為作者犯了一個錯誤，實際上是指 VideoChat.vue 檔案內容。

但是貼上的程式碼不起作用。我什至沒有得到控制台日誌。由於我是 vue.js 的新手，我想向社群詢問可能出現的錯誤。

感謝您提前的答覆。

Answer 1

我認為你是對的，你貼上的程式碼應該進入 VideoChat.vue。

在welcome.blade.php 中，請確保您已將<example-component></example-component> 替換為<video-chat> ;</video-chat>。然後您應該在控制台中看到一些日誌，並且應用程式會取得存取權杖。