인프런 커뮤니티 질문&답변

안녕하세요.

궁금한게 있어 문의드립니다.

현재 리스트 작성 페이지를 만들고 잇는데, 서버 연동은 안된상태입니다.

다만 서버연동없이..?

json 데이터를 저장할수가 잇다고 하는데 혹시 어떻게 해야 할지 알수 잇을까요..?

현재는

var list = [ { id: 300, name: '대성갈비', old: 18000, email: '백반', status: 'ㄱ월요일 휴일', birthday: '2018-04-12' }, { id: 500, name: '세븐갈비', old: 20000, email: '갈비', status: 'ㄱ월요일 휴일', birthday: '2018-04-1' }, { id: 400, name: '퍼니주', old: 10000, email: '오므라이스', status: 'ㄴ화요일 휴일', birthday: '2018-04-11' }, { id: 200, name: '멘야코노하', old: 18000, email: '돈까스', status: 'ㄴ화요일 휴일', birthday: '2018-04-12' }, { id: 150, name: '춘배버거', old: 18000, email: '햄버거', status: 'ㄷ수요일 휴일', birthday: '2018-04-12' }, { id: 150, name: '술래감자탕&순대국', old: 18000, email: '감자탕', status: 'ㄹ목요일 휴일', birthday: '2018-04-12' }, { id: 7, name: '빠오즈푸', old: 18000, email: '돈까스', status: 'ㄱ연중무휴', birthday: '2018-04-12' }, { id: 8, name: '하늘분식', old: 18000, email: '갈비', status: 'ㄱ연중무휴', birthday: '2018-04-12' }, { id: 9, name: '서울숲쭈꾸미', old: 18000, email: '쭈꾸미', status: 'ㄱ연중무휴', birthday: '2018-04-12' } ]; Vue.component('modal', { template: '#modal-template' }); new Vue({ el: '#ssfcrud', data: { list: list, item: {}, checkedList: [], filterToggle: false, filterByName: [], filterByStatus: [], sortById: false, sortByName: false, sortByOld: false, sortByStatus: false, sortByEmail: false, notification: false, showModal: false, modalType: 0, isFormValid: false }, computed: { listView: function () { var self = this; if (self.filterByName.length > 0 || self.filterByStatus.length > 0) { return self.list.filter(function(item) { return self.filterByName.indexOf(item.name) > -1 || self.filterByStatus.indexOf(item.status) > -1; }); } else { return self.list; } }, checkedAll: { get: function () { var self = this; if (self.checkedList.length > 0) { return self.listView.length == self.checkedList.length; } else { return false; } }, set: function (val) { var self = this; self.checkedList = []; if (val) { for (var i = 0; i < self.listView.length; i++) { self.checkedList.push(self.listView[i].id); } } else { self.checkedList = []; } } } }, watch: { sortById: function (val) { var self = this; self.listView = self.sortBy(self.listView, 'id', val); }, sortByName: function (val) { var self = this; self.listView = self.sortBy(self.listView, 'name', val); }, sortByOld: function (val) { var self = this; self.listView = self.sortBy(self.listView, 'old', val); }, sortByEmail: function (val) { var self = this; self.listView = self.sortBy(self.listView, 'email', val); }, sortByStatus: function (val) { var self = this; self.listView = self.sortBy(self.listView, 'status', val); } }, methods: { sortBy: function(array, param, reverse) { var filterA, filterB; return array.sort(function (a, b) { switch (param) { case 'id': filterA = a.id; filterB = b.id; break; case 'name': filterA = a.name; filterB = b.name; break; case 'old': filterA = a.old; filterB = b.old; break; case 'status': filterA = a.status; filterB = b.status; break; } if (reverse) { return (filterA > filterB) ? 1 : -1; } else { return (filterA < filterB) ? 1 : -1; } }); }, checkEmailValid: function (email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); }, openModal: function (item) { var self = this; if (item) { self.item = item; self.modalType = 2; } else { self.item = { id: self.list[self.list.length - 1].id + 1, name: null, old: null, email: null, status: 'created' }; self.modalType = 1; } self.showModal = true; }, submit: function (item) { var self = this; if (item.id == null || item.name == null || item.old == null || item.email == null || !self.checkEmailValid(item.email)) { self.isFormValid = true; } else { if (self.modalType == 1) { self.list.push(item); } else if (self.modalType == 2) { self.list.find(function (value, index) { if (value.id == item.id) { self.list[index] = item; } }); } else { return; } self.item = {}; self.showModal = false; } }, deleting: function (index) { var self = this; var confirmDelete = confirm("Are you sure to delete this?"); if (confirmDelete) { self.list.splice(index, 1); } } }, filters: { getDayOfBirthday(val) { var temp = val.slice(4); var toYear = new Date().getFullYear(); var thisBirthday = toYear + temp; var _getDay = new Date(thisBirthday).getDay(); var todayDays = ['Chu Nhat', 'Thu 2', 'Thu 3', 'Thu 4', 'Thu 5', 'Thu 6', 'Thu 7']; return todayDays[_getDay]; } } });

이와같이 구성되어있고 삭제 누르면 삭제는 되는데 새로고침하면 다시 데이터가 원복되는 상황입니다...