Bagaimana untuk melaksanakan tutorial Twilio Vue.js

Question

Saya cuba mengikuti tutorial Twilio ini: https://www.twilio.com/blog/create-video-conference-app-laravel-php-vue-js

Memandangkan ia berdasarkan Laravel 6, saya menemui beberapa pepijat pada tahun 2022. Saya telah membetulkan penghalaan dengan menambah ruang nama penuh AccessTokenController

Tetapi dalam tutorial saya diminta untuk "Ganti kod dalam welcome.blade.php dengan yang berikut:"

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

Tetapi saya rasa penulis telah membuat kesilapan dan sebenarnya bermaksud kandungan fail VideoChat.vue.

Tetapi kod yang ditampal tidak berfungsi. Saya tidak mendapat log konsol. Memandangkan saya baru menggunakan vue.js, saya ingin bertanya kepada komuniti tentang kemungkinan ralat.

Terima kasih atas balasan anda terlebih dahulu.

Answer 1

Saya rasa anda betul, kod yang anda tampal harus masuk VideoChat.vue.

di welcome.blade.php 中，确保您已将 <example-component></example-component> 替换为 <video-chat></video-chat>. Anda kemudian akan melihat beberapa log dalam konsol dan aplikasi mendapat token akses.