Comment implémenter le tutoriel Twilio Vue.js

Question

J'ai essayé de suivre ce tutoriel Twilio : https://www.twilio.com/blog/create-video-conference-app-laravel-php-vue-js

Comme il est basé sur Laravel 6, j'ai rencontré quelques bugs en 2022. J'ai corrigé le routage en ajoutant l'espace de noms complet d'AccessTokenController

Mais dans le tutoriel, on m'a demandé de "Remplacer le code dans Welcome.blade.php par ce qui suit :"

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

Mais je pense que l'auteur a fait une erreur et parlait en fait du contenu du fichier VideoChat.vue.

Mais le code collé ne fonctionne pas. Je ne reçois même pas le journal de la console. Comme je suis nouveau sur vue.js, je voulais interroger la communauté sur d'éventuelles erreurs.

Merci par avance pour votre réponse.

Answer 1

Je pense que tu as raison, le code que tu as collé devrait entrer VideoChat.vue.

à welcome.blade.php 中，确保您已将 <example-component></example-component> 替换为 <video-chat></video-chat>. Vous devriez alors voir des journaux dans la console et l'application obtient le jeton d'accès.