[vue] 조회화면, 저장화면

<template>
  <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="userNMame" @keyup.enter="searchUserList" />
    <button type="button" @click="searchUserList">조회</button>
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>직업</th>
        </tr>
      </thead>
    </table>
    <tbody>
      <tr :key="i" v-for="(person, i) in userList">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.job }}</td>
      </tr>
    </tbody>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      cityList: [
        { name: "서울", code: "02" },
        { name: "부산", code: "21" },
        { name: "제주", code: "064" },
      ],
      selectedCity: "21",
      userNMame: "",
      userList: [],
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    searchUserList() {
      //const selectedCity = this.selectedCity;
      //const userName = this.userName;
      const params = {
        selectedCity: this.selectedCity,
        userNMame: this.userNMame,
      };

      this.userList = this.getUserList(params);
    },
    getUserList(params) {
      console.log(params);

      let list = [
        { name: "민규", age: 2, job: "developer" },
        { name: "영수", age: 23, job: "deㅇㅇㅇveloper" },
        { name: "감수", age: 52, job: "developㅇㅇer" },
        { name: "민두", age: 32, job: "developeㅇㅇr" },
      ];

      return list;
    },
  },
};
</script>

><template>
  <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>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      // name: "",
      // age: 0,
      // job: "",
      userInfo: {
        name: "",
        age: 0,
        job: "",
      },
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    saveUserInfo() {
      if (this.userInfo.name == "") {
        return alert("이름을 입력해주세여");
      }
      if (this.userInfo.age == 0 || this.userInfo.age == "") {
        return alert("나이를 입력해주세용");
      }

      // const params = {
      //   name: this.name,
      //   age: this.age,
      //   job: this.job,
      // };

      const r = this.saveData(this.userInfo);
      if (r == "s") {
        alert("사용자 정보 생성");
      }
    },
    saveData(userInfo) {
      console.log(userInfo);
      const r = "s";
      return r;
    },
  },
};
</script>