Dev/Vue.js

[Vue 프로젝트 06] 간단한 조회화면,저장화면

할수있다!긍정왕 2022. 2. 13. 18:36

Vue.js 파일 

<template>
  <div>
      <div>
          <select v-model="selectedCity">
              <option :value="city.code" :key="i" v-for="(city,i) in cityList">{{city.name}}</option>
          </select>
          <input type="text" v-model="userName" @keyup.enter="searchUserList"/>
           //@keyup.enter 를통하여 엔터만 치더라도 조회가 가능하도록 함 
          <button type="button" @click="searchUserList">조회</button>
      </div>
      <div>
          <table>
              <thead>
                  <tr>
                      <th>이름</th>
                      <th>나이</th>
                      <th>직업</th>
                  </tr>
              </thead>
              <tbody>
                  <tr :key="i" v-for="(person,i) in userList">
                      <td>{{person.name}}</td>
                      <td>{{person.age}}</td>
                      <td>{{person.job}}</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</template>
<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            cityList : [
                {name : '서울', code:'02'},
                {name : '부산', code:'21'},
                {name : '제주', code:'06'}
            ],
            selectedCity:'',
            userName:'',
            userList:[]
    }
},
    methods: {
        searchUserList(){
          const params = {
              selectedCity : this.selectedCity,
              userName : this.userName
          }
          this.userList = this.getUserList(params);
        },
        getUserList(params){
            console.log(params);

            let list = [
                {name:'박보검', age:28, job:'연예인'},
                {name:'양세찬', age:33, job:'개그맨'},
                {name:'강동원', age:33, job:'연예인'},
                {name:'정우성', age:47, job:'연예인'},
            ];
            return list
        }

    }
}
</script>

List 조회화면

Save.vue

<template>
    <dir>
        <input type="text" v-model="userInfo.name">
        <input type="text" v-model.number="userInfo.age">
        <input type="text" v-model="userInfo.job">
        <button type="button" @click="saveUserInfo">저장</button>
    </dir>
</template>
<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            userInfo: {
                name: '',
                age: '',
                job: '',
            }
    }
},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeUnmount() {},
    unmounted() {},
    methods: {
        saveUserInfo(){
            if(this.userInfo.name == ''){
                return alert("사용자 이름을 입력하세요.");
            }
            if(this.userInfo.age == '' || this.userInfo.age == 0){
                return alert("나이를 입력하세요.");
            }
            // const params = {
            //     name : this.name,
            //     age : this.age,
            //     job : this.job
            // }
            const r = this.saveData(this.userInfo.params);
            if(r == 'S'){
                alert('사용자 정보가 생성되었습니다.')
            }
        },
        saveData(params){
            console.log(params);
            const r = 'S';
            return r;
        }
    }
}
</script>

 

저작자표시 비영리 변경금지