this is my error code "this.fetchArticle is not a function"
created(){
this.fetchArticles();
},
method: {
fetchArticles(){
fetch('api/articles')
.then(res => res.json())
.then(res => {
console.log(res.data)
})
}
}
thank you
Its methods not method
created(){
this.fetchArticles();
},
methods: {
fetchArticles(){
fetch('api/articles')
.then(res => res.json())
.then(res => {
console.log(res.data)
})
}
}
Related
here is the code:
Promise.resolve().then(() => {
console.log(0);
return Promise.resolve(4);
}).then((res) => {
console.log(res)
})
Promise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() => {
console.log(6);
})
to me,I thought the answer would be 0;1;4;2;3;5;6.But the result is not.Why?
I am creating an table that displays some data. when i make a delete button , i get an error "The DELETE method is not supported for this route. Supported methods: GET, HEAD."
Delete Method on employeelist.vue
deletePost(id)
{ let uri = `api/account/delete/${id}`;
this.axios.delete(uri).then(response => {
this.accounts.splice(this.accounts.indexOf(id), 1);
});
console.log("Deleted account with id ..." +id);
}
Route
{
path: '/admin',
component: () => import("./components/admin/AdminPage.vue")
children:[
{
name: 'admin',
path:'',
component: () => import("./components/admin/Dashboard.vue")
},
{
path:'/admin/employeelist',
component: () => import("./components/admin/employeeList.vue")
},
{
path:'/admin/calendar',
component: () => import("./components/admin/Calendar.vue")
},
{
path:'/admin/cloud',
component: () => import("./components/admin/Cloud.vue")
},
{
path: '/admin/notification',
component: () => import("./components/admin/Notification.vue")
}
]
},
Controller
public function delete($id)
{
$account = \App\User::find($id);
if(!empty($account)){
$account->delete();
$msg = [
'success' => true,
'message' => 'Account deleted successfully!'
];
return response()->json($msg);
} else {
$msg = [
'success' => false,
'message' => 'Account deleted failed!'
];
return response()->json($msg);
}
}
api.php
Route::get('/account','AccountController#index');
Route::post('/account/store', 'AccountController#store');
Route::post('/account/search','AccountController#search');
Route::delete('/account/delete/{id}', 'AccountController#delete');
and it get error as i said "The DELETE method is not supported for this route. Supported methods: GET, HEAD."
But
when i change the vue route like this
{
path: '/admin',
component: () => import("./components/admin/AdminPage.vue")
children:[
{
name: 'admin',
path:'',
component: () => import("./components/admin/Dashboard.vue")
},
{
path:'/admin/calendar',
component: () => import("./components/admin/Calendar.vue")
},
{
path:'/admin/cloud',
component: () => import("./components/admin/Cloud.vue")
},
{
path: '/admin/notification',
component: () => import("./components/admin/Notification.vue")
}
]
},
{
path:'/employeelist',
component: () => import("./components/admin/employeeList.vue")
},
It work succesfully, but i need it on my vue child route. what should i do?
I am have an api like this:
(This is a wechat-miniprogram api.)
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
},
fail(err) {
console.log(err)
},
complete(res) {
console.log(res.data)
}
})
However I want to use it like this:
(I want to use it like an observable.)
rxwx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
}).subscribe(
(res) => {
console.log(res.data)
},
(err) => {
console.log(err)
},
(res) => {
console.log(res.data)
}
)
I cannot transform wx.login with bindCallback or bindNodeCallback. Please help. Thanks in advance :D
Use Observable constructor instead
const request=new Observable(emitter=>{
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success:emitter.next
fail:emitter.error
complete:emitter.complete
})
return ()=>{ //... clearn up logic here }
}
I have a modal where I can create/edit user. But when I click on the submit button I got a 401 error.
The method looks like this:
sendUserData(){
axios.post('/api/saveUser', {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
},
id: this.id,
name: this.name,
email: this.email,
password: this.password
}).then(response => {
console.log(response.data);
this.$emit('userSaved')
}).catch(error => {
console.log(error)
});
}
The api.php looks like this:
Route::group([
'middleware' => 'api',
'prefix' => 'auth'
], function ($router) {
Route::post('login', 'AuthController#login');
Route::post('logout', 'AuthController#logout');
Route::post('refresh', 'AuthController#refresh');
});
Route::middleware('auth:api')->group(function () {
Route::post('saveUser', 'UserController#saveUser');
});
If I console.log the token I got a valid JSON token
How can I fix this?
Your axios function is not well formatted. It should be like this:
axios.post('/api/saveUser', {
id: this.id,
name: this.name,
email: this.email,
password: this.password
}, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
},
}).then(response => {
console.log(response.data);
this.$emit('userSaved')
}).catch(error => {
console.log(error)
});
I've recently started to study reactjs and I'm currently experimenting with ajax requests and passing properties from parent to children. I have a react component Competitions which performs an ajax request:
var Competitions = React.createClass({
getInitialState: function() {
return {
compData: [],
}
},
componentDidMount: function() {
axios.get(this.props.source, {
headers: {'X-Auth-Token': '*******************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({compData: result.data});
})
.catch(error => {
console.log(error);
});
},
render: function() {
return (
<CompTable compData={this.state.compData} />
);
}
});
module.exports = Competitions;
The Competitions component passes the results data to CompTable
var CompTable = React.createClass({
propTypes: {
compData: React.PropTypes.array.isRequired
},
handleClick: function(e) {
var url = 'http://api.football-data.org/v1/competitions/x/teams';
var source = url.replace(url.split('/')[5], e);
console.log(source);
},
render: function() {
var list = this.props.compData.map(function (comp, i) {
return (
<tr key={i+1}>
<th scope="row">{i+1}</th>
<td className={comp.id} onClick={this.handleClick.bind(this, comp.id)} >{comp.caption}</td>
</tr>
);
}, this);
return (
<tbody>{list}</tbody>
)
}
});
module.exports = CompTable;
This is the Teams component
var Teams = React.createClass({
getInitialState: function() {
return {
teamData: [],
}
},
componentDidMount: function() {
axios.get(this.props.source, {
headers: {'X-Auth-Token': '*******************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({teamData: result.teams.data});
})
.catch(error => {
console.log(error);
});
},
render: function() {
return (
<TeamsTable teamData={this.state.teamData} />,
);
}
});
module.exports = Teams;
What I'm trying to do is take on click the compData.id property of the CompTable component with a handleClick function and use it as a source property on another component named Teams (identical with the Competitions component) that uses the given property as a source url in order to perform a new ajax request. Is there a way to do that? Thank you
I think I found a solution to my problem.
So, Competitions is the Parent and CompTable and Teams are the children. I don't know if there is a simpler way, but this one seems to work. It's not perfect, I have other problems to solve, but I managed to make a second ajax call inside a child component using my first ajax call inside the parent component, by grabbing the compData.id property and passing it to the children, on click. Any comments are welcome.
Competitions component
var Competitions = React.createClass({
getInitialState: function() {
return {
compData: [],
id: "",
}
},
componentDidMount: function() {
axios.get(this.props.source, {
headers: {'X-Auth-Token': '********************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({compData: result.data});
})
.catch(error => {
console.log(error);
});
},
changeId: function (newId) {
this.setState({
id: newId
});
},
render: function() {
return (
<CompTable compData={this.state.compData} id={this.state.id} onClick= {this.changeId} />
);
}
});
module.exports = Competitions;
CompTable component
var CompTable = React.createClass({
propTypes: {
compData: React.PropTypes.array.isRequired
},
getInitialState: function() {
return {
showTeams: false,
hide: false,
};
},
teamsClick: function() {
this.setState({
showTeams: true,
hide: true,
});
},
handleClick: function(e) {
this.props.onClick(e);
},
render: function() {
var list = this.props.compData.map(function (comp, i) {
return (
<tr key={i+1}>
<th scope="row">{i+1}</th>
<td className={comp.id} onClick={function() { this.teamsClick(); this.handleClick(comp.id); }.bind(this)}> {comp.caption} </td>
<td>{comp.league}</td>
<td>{comp.numberOfTeams}</td>
</tr>
);
}, this);
return (
<div > { this.state.showTeams ? <Teams id={this.props.id}/> : null } </div>
<tbody>{list}</tbody>
)
}
});
module.exports = CompTable;
Teams component
var Teams = React.createClass({
getInitialState: function() {
return {
teamData: [],
}
},
componentDidMount: function() {
var url = 'http://api.football-data.org/v1/competitions/x/teams';
var source = url.replace(url.split('/')[5], this.props.id);
axios.get(source, {
headers: {'X-Auth-Token': '********************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({teamData: result.data.teams});
})
.catch(error => {
console.log(error);
});
},
render: function() {
return (
<TeamsTable teamData={this.state.teamData}/>
);
}
});
module.exports = Teams;