In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:
- Create a new file called list.vue in the src/components folder and open it.
- Import the getHttp and deleteHttp from fetchApi and the changeComponent mixin:
import {
getHttp,
deleteHttp,
} from '../http/fetchApi';
import changeComponent from '../mixin/changeComponent';
- In the component mixins property, we need to add the imported changeComponent mixin:
mixins: [changeComponent],
- In the data property of the component, we add a new property named userList, with a default empty array:
data: () => ({
userList: [],
}),
- For the methods, we create getAllUsers and deleteUsers methods. In the getAllUsers method, we fetch the user lists and set the userList value as the response from the getHttp function execution. The deleteUser method will execute the deleteHttp function...