Question

这是我第一次使用laravel Vue和axios。我试图将“订阅”按钮添加到我的用户频道。它不在axios中返回订户响应吗？我的response.data是否错误或模板中的输出是否正确？任何帮助都会很好。如果需要，我可以提供更多代码。谢谢

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>

我的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');
    });

});

如果我console.log（订阅者）出现此错误

[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

Laravel Vue axios不返回response.data

0 个答案: