Javascript Laravel vue axios未返回response.data

Javascript Laravel vue axios未返回response.data,javascript,laravel,vue.js,axios,Javascript,Laravel,Vue.js,Axios,这是我第一次使用laravel Vue和axios。我正在尝试向我的用户频道添加订阅按钮。它不会在axios?中返回订户响应?。我是否有响应。数据错误或模板中的输出或两者都有?任何帮助都是好的。如果需要,我可以提供更多的代码。谢谢 AppSubscribeButton.vue <template> <div v-if="subscribers !== null"> {{ subscribers }} Subscribe &nbsp;

这是我第一次使用laravel Vue和axios。我正在尝试向我的用户频道添加订阅按钮。它不会在axios?中返回订户响应?。我是否有响应。数据错误或模板中的输出或两者都有?任何帮助都是好的。如果需要,我可以提供更多的代码。谢谢

AppSubscribeButton.vue

    <template>
    <div v-if="subscribers !== null">
        {{ subscribers }} Subscribe &nbsp;
        <button class="btn btn-xs btn-default" type="button" v-if="canSubscribe">{{ userSubscribed ? 'Unsubscribe' : 'Subscribe' }}</button>
    </div>
</template>

<script>

import pluralize from 'pluralize'

export default {
        data () {
            return {
                subscribers: null,
                userSubscribed: false,
                canSubscribe: false
            }
        },
         props: {
            channelSlug: null
        },
        methods: {
            getSubscriptionStatus () {
                   axios.get('/subscription/' + this.channelSlug).then((response) => {
                    this.subscribers = response.data.count;
                    this.userSubscribed = response.data.user_subscribed;
                    this.canSubscribe = response.data.can_subscribe;
                 })
                },
            pluralize    
            },
        mounted () {
            this.getSubscriptionStatus();
        }

    }
</script>

{{订户}}订阅
{{userSubscribed?'Unsubscribe':'Subscribe'}
从“多元化”导入多元化
导出默认值{
数据(){
返回{
订阅者:空,
userSubscribed:false,
可以订阅:false
}
},
道具:{
channelSlug:null
},
方法:{
getSubscriptionStatus(){
获取('/subscription/'+this.channelSlug)。然后((响应)=>{
this.subscribers=response.data.count;
this.userSubscribed=response.data.user\u subscribed;
this.canSubscribe=response.data.can_subscribe;
})
},
多元化
},
挂载(){
this.getSubscriptionStatus();
}
}
my web.php

<?php

Route::get('/', 'HomeController@index')->name('home');

Route::get('/channel/{channel}', 'ChannelController@show');

Route::get('/subscription/{channel}', 'ChannelSubscriptionController@show');

Auth::routes(['verify' => true]);


Route::group(['middleware' => ['verified']], function() {


Route::group(['prefix' => 'account', 'middleware' => ['auth'], 'as' => 'account.'], function () {

    /**
     * Account
     */
    Route::get('/', 'Account\AccountController@index')->name('index');

    /**
    * Profile
    */
    Route::get('profile', 'Account\ProfileController@index')->name('profile');
    Route::post('profile', 'Account\ProfileController@store')->name('profile.store');

    /**
    * Password
    */
    Route::get('password', 'Account\PasswordController@index')->name('password');
    Route::post('password', 'Account\PasswordController@store')->name('password.store');
});


    /**
    * Dashboard
    */
    Route::get('/dashboard', 'DashboardController@index')->name('dashboard');



    /**
    * Teams
    */
    Route::resource('teams', 'Teams\TeamController');

    Route::get('teams/{team}/delete', 'Teams\TeamController@delete')
        ->name('teams.delete');

    Route::get('teams/{team}/users/{user}/delete', 'Teams\TeamUserController@delete')
        ->name('teams.users.delete');   

    Route::resource('teams/{team}/users', 'Teams\TeamUserController')->names([
        'index' => 'teams.users.index',
        'store' => 'teams.users.store',
        'destroy' => 'teams.users.destroy',
    ]);

    Route::get('teams/{team}/users/{user}/roles', 'Teams\TeamUserRoleController@edit')
        ->name('teams.users.roles.edit');

    Route::patch('teams/{team}/users/{user}/roles', 'Teams\TeamUserRoleController@update')
        ->name('teams.users.roles.update');

    /**
    * Channels
    */  
    Route::group(['middleware' => ['auth']], function () {
        Route::get('/channel/{channel}/edit', 'ChannelSettingsController@edit');
        Route::put('/channel/{channel}/edit', 'ChannelSettingsController@update');
        Route::get('/createchannel', 'ChannelCreateController@index')->name('createchannel');
        Route::put('/createchannel', 'ChannelCreateController@store')->name('createchannel.store');
        Route::get('/channel/{channel}/delete', 'ChannelSettingsController@index');
        Route::delete('/channel/{channel}/delete', 'ChannelSettingsController@destroy')->name('createchannel.destroy');
    });

});          

您是否在浏览器开发工具中看到请求和响应?您是否收到系统正在吞咽的错误,因为您的请求中似乎没有错误处理程序。请尝试在您的chrome元素中查看错误消息。响应代码和消息是什么?如果返回任何数据,请尝试
console.log(this.subscribers)
谢谢您的快速回复…当我执行console.log时,我在开发控制台工具中没有看到任何错误:(mounted(){this.getSubscriptionStatus();console.log(this.subscribers)}如果我将按钮更改为此,我可以看到subscribe和按钮…看起来{{subscribers}}无法获取计数?subscribers subscribe这是我第一次使用axios,所以我不知道这是否正确?方法:{GetSubscribtionStatus(){axios.get('/subscription/'+this.channelSlug).然后((response)=>{this.subscribers=response.data.count;this.userSubscribed=response.data.user_subscribed;this.canSubscribe=response.data.can_subscribe;}),
[Vue warn]: Error in mounted hook: "ReferenceError: subscribers is not defined"

found in

---> <SubscribeButton> at resources/js/components/AppSubscribeButton.vue
       <Root> app.js:38444:15
    warn http://teams.com:8000/js/app.js:38444
    logError http://teams.com:8000/js/app.js:39703
    globalHandleError http://teams.com:8000/js/app.js:39698
    handleError http://teams.com:8000/js/app.js:39658
    invokeWithErrorHandling http://teams.com:8000/js/app.js:39681
    callHook http://teams.com:8000/js/app.js:42024
    insert http://teams.com:8000/js/app.js:40956
    invokeInsertHook http://teams.com:8000/js/app.js:44145
    patch http://teams.com:8000/js/app.js:44362
    _update http://teams.com:8000/js/app.js:41750
    updateComponent http://teams.com:8000/js/app.js:41871
    get http://teams.com:8000/js/app.js:42282
    Watcher http://teams.com:8000/js/app.js:42271
    mountComponent http://teams.com:8000/js/app.js:41878
    $mount http://teams.com:8000/js/app.js:46848
    $mount http://teams.com:8000/js/app.js:49733
    _init http://teams.com:8000/js/app.js:42816
    Vue http://teams.com:8000/js/app.js:42882
    js http://teams.com:8000/js/app.js:49869
    __webpack_require__ http://teams.com:8000/js/app.js:20
    0 http://teams.com:8000/js/app.js:50007
    __webpack_require__ http://teams.com:8000/js/app.js:20
    <anonymous> http://teams.com:8000/js/app.js:84
    <anonymous> http://teams.com:8000/js/app.js:87