<p>LoginForm 과 동일하게</p>
<p>SignupForm에서&nbsp; 아래와 같이 코드를 추가하였습니다.</p>
<p></p>
<div style="color: #d6deeb; background-color: #011627; font-family: Hack, Menlo, Monaco, 'Courier New', monospace; font-size: 15px; line-height: 23px; white-space: pre;"><span style="color: #c792ea; font-style: italic;">import</span> { validateEmail } <span style="color: #c792ea; font-style: italic;">from</span> <span style="color: #d9f5dd;">'</span><span style="color: #ecc48d;">@/utils/validation</span><span style="color: #d9f5dd;">'</span>;</div>
<p>...</p>
<div style="color: #d6deeb; background-color: #011627; font-family: Hack, Menlo, Monaco, 'Courier New', monospace; font-size: 15px; line-height: 23px; white-space: pre;">
<div>computed: {</div>
<div><span style="color: #82aaff; font-style: italic;">isUsernameValid</span><span style="color: #d9f5dd;">()</span> {</div>
<div><span style="color: #c792ea; font-style: italic;">return</span> <span style="color: #82aaff; font-style: italic;">validateEmail</span>(<span style="color: #7fdbca;">this</span><span style="color: #c792ea; font-style: italic;">.</span><span style="color: #7fdbca;">username</span>);</div>
<div>},</div>
<div>},</div>
</div>
<p>그런데 브라우저에서 vue 탭에서 확인해보면,</p>
<p><span data-v-6351468c="" class="key" style="box-sizing: border-box; color: #e36eec; display: inline-block; vertical-align: middle; font-family: Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap; background-color: #0b1015;">isUsernameValid</span><span data-v-6351468c="" class="colon" style="box-sizing: border-box; display: inline-block; vertical-align: middle; margin-right: 0.5em; position: relative; color: #ffffff; font-family: Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap; background-color: #0b1015;">:</span><span data-v-6351468c="" class="value string raw-string" style="box-sizing: border-box; display: inline-block; color: #e33e3a; vertical-align: middle; font-family: Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap; background-color: #0b1015;"><span style="box-sizing: border-box; color: #c41a16;">"</span>(error&nbsp;during&nbsp;evaluation)<span style="box-sizing: border-box; color: #c41a16;">"</span></span></p>
<p>위와 같이 뜹니다.&nbsp;</p>
<p>그 이유가 무엇일까요?</p>

<p>동일한 문제로 한참 헤매다가 글올려요..</p>
<div style="color: #d6deeb; background-color: #011627; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #c792ea; font-style: italic;">import</span>&nbsp;{&nbsp;validateEmail&nbsp;}&nbsp;<span style="color: #c792ea; font-style: italic;">from</span>&nbsp;<span style="color: #d9f5dd;">'</span><span style="color: #ecc48d;">@/utils/validation.js</span><span style="color: #d9f5dd;">'</span>;</div>
<p></p>
<p>import 할때 중괄호{} 를 빼고 가져오면&nbsp;&nbsp;<span style="background-color: #0b1015; color: #e33e3a; font-family: Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap;">(error during evaluation)</span></p>
<p>라고 뜸니다.</p>
<p></p>

<p>안녕하세요 인숙님~ 주말인데도 학습 열심히 하고 계시네요 :) 질문 주셔서 제가 현상을 재현해보려고 하는데 잘 안되는 것 같아요. 위와 같이 코드 작성한 후에 화면을 새로 고침 해도 동일한 에러가 뜨나요?&nbsp;</p>

Inflearn Community Q&A

퀴즈를 푸는데 computed가 제대로 나오지 않습니다.