实现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>。然后您应该在控制台中看到一些日志，并且应用程序获取访问令牌。