Vue.js 오류 정리

1. Invalid shorthand property initializer

초기 변수 설정시 ':'를 써야 되지만 '='을 쓴경우 발생
ex) loading = false --> loading : false로 바꿔야 함.(initial 할 때)

2. delimiter

delimeter라고 쓰지말기

3. 계속 ${}이 값으로 바뀌지 않는 경우(접속 과정에는 error가 발생하지 않음)

보통 html에 그 원인이 있음

• html에서 id 설정을 잘못 해준 경우
• tr v-for을 했을 경우에는 그 안의 것들을 table 범위로 묶어주어야 값이 바뀜.

	<tr>
      <td>${comment.author}</td>
    </tr> <!-- good -->
	
	<tr>
      #{comment.author}
	</tr> <!-- bad -->

	<!-- 추가!! -->
	<div v-for="...">
      이거 하면 위처럼 td 이딴거 안씌워도 잘 된다.
	</div>

4. post하는 부분에서 csrf-token 값을 넘겨주는 header를 포함하도록 axios를 구성할 것.

다음과 같다.

axios.post('/post/api/' + pk + '/comments/', this.content, headers = { "X-CSRFToken": csrftoken })

this.content같은 경우에는 form으로 만든 후 저장해도 되고, payload로 따로 변수를 생성해서 올려도 된다.

5. submit.prevent를 쓰면...

prevent라는 것 자체가 만약 submit를 눌렀다면 page의 url이 바뀔 수 있는데 그러한 현상을 막아준다는 의미에서 이용한다. 다음과 같이 이용할 수 있다.

<form v-on:submit.prevent="postComment(id)" id="inform">
            {% csrf_token %}
            <p><textarea id="content" name="content" placeholder="댓글 달기" cols="100" rows="5"></textarea></p>
            <input type="submit" value="Submit">
</form>

그러면 다음과 같이 보여질 것이다.