Search result

14. 전체소스

Add New Task id Name Body {{index + 1}} {{task.name}} {{task.body}} Edit...

laravel vue crud

13. 토스트 알림기능만들기

1. 알림 패키지설치1npm install toastrcs2. resources/js/bootstrap.js 에 다음을 추가한다.window.toastr = require('toastr');resources/sass/app.scss 에 다음을 추가한다[email protected] '~toastr/toastr.scss';3. 토...

laravel vue crud

12. 로더피처 적용하기

1. 공개폴더(public)에 images/loder1.gif 파일을 넣는다.2. 이미지를 삽입하고  flase3. 로더가 적용될 메서드에 ture 작성한다.4. 템플릿안에 보일 위치에 image 바인딩을 한다. 5. 확인6. 수정...

laravel vue crud

11. 글작성 후 데이터가 남는 문제 해결

글작성 후 다시 글작성할때 기존 데이터가 남아있는 것을 볼 수 있다.1. resetData()메서드를 만들어준다. //리셋데이터 호출 resetData(){ this.task.name = '', this.task.body = '' }2....

laravel vue crud

10. Delete

1. 사진과 같은 부분에 deleteTask 매개변수받는 메서드를 만들어준다2. 버튼클릭이벤트에 해당메서드를 삽입한다.Delete3. delete 메서드 삭제 로직 deleteTask(index){ let confirmBox = confirm("정말...

laravel vue crud

9. update

1. TaskComponent.vuecreate modal을 복사 후 붙여넣기 한 다음 수정해서 사용한다.2. methods:{} 에 업데이트 모달창이벤트메서드를 만들어준다. //업데이트 모달창 오픈 loadUpdateModal(){ },3. E...

laravel vue crud

8. 유효성 검사

1. uri 아래에 에러배열을 만들어준다. uri: "http://laravelvuecrud.test/tasks/", errors: []2. catch 부분을 작성해준다. //데이터 삽입하기 createTask(){ axios.post(this.uri, {nam...

laravel vue crud

7. Database Modal Create

1. 모달 적용https://getbootstrap.com/docs/4.4/components/modal/2. Modal 설정 Create Modal ×...

laravel vue crud

6. Databases Data 불러오기

1. TaskComponent.vue Add New Task id Name Body {{index + 1}} {{task.name}} {{task.body}}...

laravel vue crud

5. TaskComponent 템플릿변경

TaskComponent.vue  파일1. 버튼을 달아준다. Add New Task export default { mounted() { console.log('Component mounted.') } }2. 테이블 디자인 Add New Task...

laravel vue crud