VUE .data 사용 주의

var v = new Vue({
el: '#chatApp',
data: {
"msgs":[],
}
}

Vue.component('autolink', {
  props: ['content'],
  template: '<span>{{ content }}</span>',
  mounted: function() {
    $(this.$el).autolink();
  }
});


<li class="list-group-item msg"  v-for="msg in msgs" :data-app="msg.app" :data-fun="msg.fun">
<autolink :content="msg.val"></autolink>
</li>

이 상태에서
v.msgs.shift();
v.msgs.push();
를 사용할 경우, 데이터 갱신 없이, UI가 그려진다. 즉, autolink 에 적힌 내용이 안바뀐다. 그외 부분은 바뀌는데...

<autolink :content="msg.val"></autolink> 가 <span>{{ content }}</span> 으로 바뀌면서 연결에 문제가 생기는 듯
v.msgs.shift();
v.msgs.push();
를 해도 autolink 부분을 빼버리면 정상 동작 한다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.11
2.12
2.13
2.14
2.15
2.16
2.17
2.18
2.19
2.20
2.21
2.22
2.23
2.24
2.25
2.26
2.27
2.28