Add New Task id Name Body {{index + 1}} {{task.name}} {{task.body}} Edit...
laravel vue crud
38LARAVEL on 20-02-27
1. 알림 패키지설치1npm install toastrcs2. resources/js/bootstrap.js 에 다음을 추가한다.window.toastr = require('toastr');resources/sass/app.scss 에 다음을 추가한다.@import '~toastr/toastr.scss';3. 토...
1. 공개폴더(public)에 images/loder1.gif 파일을 넣는다.2. 이미지를 삽입하고 flase3. 로더가 적용될 메서드에 ture 작성한다.4. 템플릿안에 보일 위치에 image 바인딩을 한다. 5. 확인6. 수정...
글작성 후 다시 글작성할때 기존 데이터가 남아있는 것을 볼 수 있다.1. resetData()메서드를 만들어준다. //리셋데이터 호출 resetData(){ this.task.name = '', this.task.body = '' }2....
1. 사진과 같은 부분에 deleteTask 매개변수받는 메서드를 만들어준다2. 버튼클릭이벤트에 해당메서드를 삽입한다.Delete3. delete 메서드 삭제 로직 deleteTask(index){ let confirmBox = confirm("정말...
1. TaskComponent.vuecreate modal을 복사 후 붙여넣기 한 다음 수정해서 사용한다.2. methods:{} 에 업데이트 모달창이벤트메서드를 만들어준다. //업데이트 모달창 오픈 loadUpdateModal(){ },3. E...
1. uri 아래에 에러배열을 만들어준다. uri: "http://laravelvuecrud.test/tasks/", errors: []2. catch 부분을 작성해준다. //데이터 삽입하기 createTask(){ axios.post(this.uri, {nam...
1. 모달 적용https://getbootstrap.com/docs/4.4/components/modal/2. Modal 설정 Create Modal ×...
1. TaskComponent.vue Add New Task id Name Body {{index + 1}} {{task.name}} {{task.body}}...
TaskComponent.vue 파일1. 버튼을 달아준다. Add New Task export default { mounted() { console.log('Component mounted.') } }2. 테이블 디자인 Add New Task...
38LARAVEL on 20-02-26
