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