πŸ“±Vue.js

[ Vue js + JSP ] EL 값을 바인딩 ν•˜λ©΄, 이벀트 전달이 μ•ˆλ˜λŠ” ν˜„μƒ

harry.93 2022. 3. 18. 18:49
λ°˜μ‘ν˜•

JSP νŽ˜μ΄μ§€ λ‚΄μ—μ„œ Vue.js μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•˜λ˜ 쀑, 이벀트 전달이 μ•ˆλ˜λŠ” ν˜„μƒμ΄ λ°œμƒν–ˆλ‹€.

 

jsp νŽ˜μ΄μ§€ λ‚΄ vue.js μ„ μ–Έ λΆ€λΆ„

var vm = new Vue({
	el: '#content',
	components: {},
	data: function () {
		return {
        	list: [],
			pageInfo: {
				pageNo: 1,
				pageSize: 10,
				totalCount: 0,
			}
		}
	},
	created: function () {
		let vm = this;
		vm.list = JSON.parse('${result.list}');
		vm.totalCount = ${result.totalCount};
	},
	mounted: function () {
		console.log('mounted p');
	},
	updated: function () {
		console.log('updated p');
	},
	distroyed: function () {
		console.log('distroyed p');
	},
	methods: {
		goPage: function (pageNo) {
			location.href="./index.do?pageNo=" + pageNo;
		},
	}
});

 

μ»΄ν¬λ„ŒνŠΈ λΆ€λΆ„

<paging v-bind:total-count="pageInfo.totalCount" v-bind:page-no="pageInfo.pageNo" v-bind:opts="pageInfo" @update:page="goPage"></paging>

 

pageInfo 값을 κ°€μ Έμ™€μ„œ νŽ˜μ΄μ§•μ„ κ·Έλ¦¬λŠ” μ»΄ν¬λ„ŒνŠΈμ΄λ‹€.

이 μƒν™©μ—μ„œ 아무리 pageInfo 의 totalCount λ₯Ό μ—…λ°μ΄νŠΈ 해도 νŽ˜μ΄μ§€κ°€ μ •μƒμ μœΌλ‘œ λ™μž‘ν•˜μ§€ μ•Šμ•˜λ‹€.

 

1. μ»΄ν¬λ„ŒνŠΈ μ„ μ–Έ 뢀에, μ½˜μ†” 둜그λ₯Ό 찍고 ν™•μΈν•΄λ³΄μ•˜λ‹€.

>> λ‘œκ·Έκ°€ μ°νžˆμ§€ μ•Šμ•˜λ‹€.

2. Create μ‹œμ μ—μ„œ totalCount λ₯Ό μž„μ˜μ˜ κ°’μœΌλ‘œ λ³€κ²½ν–ˆλ‹€.

>> ν•΄λ‹Ή κ°’μœΌλ‘œ νŽ˜μ΄μ§•μ΄ μ •μƒλ™μž‘ ν•˜μ˜€λ‹€.

 

μœ„ 상황을 톡해 κ²°κ΅­μ—” 이벀트 μ „νŒŒμ— λ¬Έμ œκ°€ μžˆλ‹€κ³  μƒκ°ν–ˆκ³ 

무엇이 λ¬Έμ œμΈμ§€ μ°Ύμ•„λ³Έ κ²°κ³Ό 곡식 λ¬Έμ„œμ—μ„œ μ•„λž˜μ˜ λ‚΄μš©μ„ μ°Ύμ•˜λ‹€.

 

즉, Create μ‹œμ μ—μ„œλŠ” $el 을 μ‚¬μš©ν•  수 μ—†λ‹€λŠ” μ–˜κΈ°μ΄λ‹€. 아무리 create μ‹œμ μ—μ„œ λ³€μˆ˜μ— el 값을 바인딩 ν•΄λ΄€μž Vue μ—μ„œ ν•΄λ‹Ή 값이 변경됨을 κ°μ§€ν•˜μ§€ λͺ»ν•˜λŠ” 것이닀. 

λ”°λΌμ„œ μ•„λž˜μ™€ 같이 mount λΆ€λΆ„μ—μ„œ μˆ˜μ •μ„ ν•΄μ€ŒμœΌλ‘œμ¨ 문제λ₯Ό ν•΄κ²°ν–ˆλ‹€.

mounted: function () {
	console.log('mounted p');
	let vm = this;
	vm.pageInfo.totalCount = ${result.totalCount};
	vm.pageInfo.pageNo = ${result.paramMap.pageNo};
},

 

JSP νŽ˜μ΄μ§€μ—μ„œ Vue.js λ₯Ό μ‚¬μš©ν•œλ‹€λ©΄ κΌ­ λͺ…심해야할 μ‚¬ν•­μœΌλ‘œ 보인닀.

 

 

 

 

728x90
λ°˜μ‘ν˜•