[Vue.js] 버튼 로직이 제대로 동작을 안하는 것 같을 때, chunk-VZXQDS5F.js?v=5f04997f:2125 [Vue warn]: Data property "idDuplicate" is already defined in Methods.

 

 

 

버튼이 동작하지 않을 때,
어떤 오류인지 찾아보자!

 

 

 

 

1. 코드와 문제 살피기

<script> 코드 중 method 일부

async idDuplicate() {
      try{
        const res = await axios.post("http://localhost:8080/api/idDuplicate", {
          userId: this.userId
        });
        alert("사용가능한 아이디입니다.");
        this.idDuplicate = false;
      } catch(e) {
        alert(e.response.data);
        this.idDuplicate = true;
      }
    },

아이디와 이메일을 중복 체크하는 버튼을 만들었다. 보기엔 문제가 없어보였는데, 버튼을 눌러도 동작이 이뤄지지 않았다. 스프링 내부의 로직 문제일까 싶어서 스프링도 체크 해봤지만, 버튼을 눌러도 스프링까지 요청이 오지 않았다. 그렇다면 vue 코드에 문제가 있어서 버튼 자체가 동작하지 않는다는 의미가 된다.

 

 

 

 

---

 

 

 

 

2. 콘솔로 문제 확인하기

<script> 코드 중 method 일부


async idDuplicate() {

      /* 코드 추가!!!! */
      console.log("idDuplicate 버튼 클릭됨:", this.userId);
      
      try{
        const res = await axios.post("http://localhost:8080/api/idDuplicate", {
          userId: this.userId
        });
        alert("사용가능한 아이디입니다.");
        this.idDuplicate = false;
      } catch(e) {
        alert(e.response.data);
        this.idDuplicate = true;
      }
    },

버튼을 누르면 콘솔에 로그가 찍히도록 추가했다. 버튼에 문제가 있으니, 어떤 문제인지 알려줄 것이다.

 

chunk-VZXQDS5F.js?v=5f04997f:2125 [Vue warn]: 
Data property "idDuplicate" is already defined in Methods. 
at <BasicRegister onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView > at <App>

엄청나게 긴 에러 메시지가 떴다. 말을 들어보면 데이터인 idDuplicate가 이미 메서드에 정의되있다고 말하는 것 같다. 쉽게 말해서 data와 method에 동일한 이름이 적혀있다는 것! (이메일도 오류가 똑같이 적혀있었다.)

 

 

 

 

---

 

 

 

 

 

3. 문제 해결

<script>의 data

  data() {
    return {
      name: "",
      userId: "",
      pwd: "",
      pwdConfirm: "",
      tel: "",
      birth: "",
      email: "",
      idDuplicate: true,
      emailDuplicate: true,
    };
  },

<script> 코드 중 method 일부


async checkIdDuplicate() {
      try{
        const res = await axios.post("http://localhost:8080/api/idDuplicate", {
          userId: this.userId
        });
        alert("사용가능한 아이디입니다.");
        this.idDuplicate = false;
      } catch(e) {
        alert(e.response.data);
        this.idDuplicate = true;
      }
    },

아까 메서드명도 idDuplicate로 적었고, data에도 idDuplicate라고 정의했다. 알아서 데이터와 메서드를 구분할 줄 알았는데, 못하나보다... 해결법은 아주 간단하다. 메서드명을 바꾸거나 데이터명을 바꾸면 된다. 필자는 메서드명을 checkIdDuplicate로 바꿔줬다. 그리고 template에 연결된 코드가 있어서 그것도 확인해줬다.