mysql 샘플 테이블 + 쿼리 연습 문제

-
http://java-school.net/jdbc/SQL-SELECT-Statement CREATE TABLE DEPT (     DEPTNO DECIMAL ( 2 ),     DNAME VARCHAR ( 14 ),     LOC VARCHAR ( 13 ),     CONSTRAINT PK_DEPT PRIMARY KEY ( DEPTNO ) ); CREATE TABLE EMP (     EMPNO DECIMAL ( 4 ),     ENAME VARCHAR ( 10 ),     JOB VARCHAR ( 9 ),     MGR DECIMAL ( 4 ),     HIREDATE DATE ,     SAL DECIMAL ( 7 , 2 ),     COMM DECIMAL ( 7 , 2 ),     DEPTNO DECIMAL ( 2 ),     CONSTRAINT PK_EMP PRIMARY KEY ( EMPNO ),     CONSTRAINT FK_DEPTNO FOREIGN KEY ( DEPTNO ) REFERENCES DEPT ( DEPTNO ) ); CREATE TABLE SALGRADE (     GRADE TINYINT ,     LOSAL SMALLINT ,     HISAL SMALLINT ); INSE...

Vue.js 변경된 데이터 적용하기

-
Vue.js





 전체 리스트에서 검색결과만 보여주고싶다.

검색조건 - 부모 컴포넌트
리스트 - 자식 컴포넌트





















1. 부모 컴포넌트(검색조건)에서 이벤트(검색클릭)가 일어났을 때
-> 2. 자식 컴포넌트에게 데이터를 보내줌
-> 3. 자식 컴포넌트가 데이터 변경을 감지
-> 4. 변경된 데이터 뿌려줌




1. api 호출 하고 받아온 데이터를 data에 세팅

부모컴포넌트.vue
<script>
data () {
return {
rows: []
}
},
methods: {
getList () {
let param = {
s_user_id: this.user_id,
s_user_nm: this.user_nm,
s_group_cd: this.group_cd
}
console.log(param)
user.getUserListOption(
(data) => {
this.rows = data
}, param)
}
}
</script>





2. 템플릿에 CList 컴포넌트 에서 v-bind로 데이터를 바인딩 해준다

부모컴포넌트.vue
<template>
<CList name="list" class="default" v-bind:new-data="rows"></CList>
</template>


3. props로 부모컴포넌트에서 바인딩해준 데이터를 받아온다.
4. watch 데이터가 변경된게 있으면 기존 rows를 새 데이터로 세팅해준다.

자식컴포넌트.vue
<script>
props: ['newData'],
data () {
return {
rows: [ ]
}
},
created () {
this.getList()
},
watch: {
newData: function (newVal, oldVal) {
this.rows = newVal
}
},
</script>