I am in a print-user component after I click edit button I am redirecting edit-user component. I have to send the data from print-user to edit-user. So I am calling the edit-user component-class function from print-user component-class. But it is showing the error
app/components/print-user.hbs
</input5>
<table class="styled-table">
<thead>
<tr><th>User Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Mailid</th>
<th>Delete</th>
</tr>
</thead>
{{#each this.dummyresponse.Users_data as |user|}}
<tbody>
<tr>
<td>{{user.id}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.mailid}}</td>
<LinkTo @route="edit-user" ><button {{on "click" (fn edituser user.id user.firstname user.lastname user.mailid )}} >Edit</button>r</LinkTo></td>
</tr>
</tbody>
{{/each}}
</table>
{{yield}}
app/components/print-user.js
import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
import EditUserComponent from './edit-user';
export default class PrintUserComponent extends Component {
@tracked dummyresponse="";
@action
async printuser (){
let response=await fetch("/UserManagement/SearchServlet",
{ method: "POST",
body: JSON.stringify({
"type": "",
"searchtext": ""
})
});
this.dummyresponse=await response.json();
}
edituser (id,firstname,lastname,mailid){
alert("print-user.js entered");
console.log(EditUserComponent.edituser(id,firstname,lastname,mailid));
alert("print-user.js after method call entered");
}
}
app/components/edit-user.hbs
import Component from '@glimmer/component';
export default class EditUserComponent extends Component {
async edituser (id,firstname,lastname,mailid){
alert("edit-user.js entered");
let response=await fetch("/UserManagement/UserManagementServlet",
{ method: "POST",
body: JSON.stringify({
"type": "edit",
"id": id,
"firstname":firstname,
"lastname":lastname,
"mailid":mailid
})
});
}
}
app/components/edit-user.js
import Component from '@glimmer/component';
export default class EditUserComponent extends Component {
async edituser (id,firstname,lastname,mailid){
alert("edit-user.js entered");
let response=await fetch("/UserManagement/UserManagementServlet",
{ method: "POST",
body: JSON.stringify({
"type": "edit",
"id": id,
"firstname":firstname,
"lastname":lastname,
"mailid":mailid
})
});
}
}
Uncaught TypeError: _editUser.default.edituser is not a function
at Proxy.edituser (print-user.js:88)
at Proxy.<anonymous> (runtime.js:7105)
You are trying to use edituser
method of EditUserComponent
as a static method in edituser
method of PrintUserComponent
. Simplified your code looks like this:
import EditUserComponent from './edit-user';
console.log(EditUserComponent.edituser(id,firstname,lastname,mailid));
You aren't calling edituser
method on an instance of the class but on the class itself. Maybe you are looking for a good old utility function instead?
// app/utils/edituser.js
async function edituser (id,firstname,lastname,mailid){
alert("edit-user.js entered");
let response=await fetch("/UserManagement/UserManagementServlet",
{ method: "POST",
body: JSON.stringify({
"type": "edit",
"id": id,
"firstname":firstname,
"lastname":lastname,
"mailid":mailid
})
});
}
export default edituser;
That utility function could be used like this:
import edituser from '../utils/edituser';
console.log(edituser(id,firstname,lastname,mailid));
Components should only be invoked in templates. So they are for sure not what you want.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.