So implementieren Sie das Twilio Vue.js-Tutorial

Question

Ich habe versucht, diesem Twilio-Tutorial zu folgen: https://www.twilio.com/blog/create-video-conference-app-laravel-php-vue-js

Da es auf Laravel 6 basiert, bin ich im Jahr 2022 auf einige Fehler gestoßen. Ich habe das Routing korrigiert, indem ich den vollständigen Namespace von AccessTokenController hinzugefügt habe

Aber im Tutorial wurde ich gebeten, „den Code in Welcome.blade.php durch Folgendes zu ersetzen:“

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

Aber ich denke, der Autor hat einen Fehler gemacht und tatsächlich den Inhalt der VideoChat.vue-Datei gemeint.

Aber der eingefügte Code funktioniert nicht. Ich bekomme nicht einmal das Konsolenprotokoll. Da ich neu bei vue.js bin, wollte ich die Community nach möglichen Fehlern fragen.

Vielen Dank für Ihre Antwort im Voraus.

Answer 1

我认为你是对的，你粘贴的代码应该进入 VideoChat.vue。

在 welcome.blade.php 中，确保您已将 <example-component></example-component> 替换为 <video-chat></video-chat>。然后您应该在控制台中看到一些日志，并且应用程序获取访问令牌。