반응형
Vue.js를 사용한 어레이 콘텐츠 및 반응성 문제 해결
몇 년 전만 해도 하는 것은 나쁜 습관이었다
array = [];
어레이가 어딘가에서 참조되고 있는 경우는, 그 참조가 갱신되어 있지 않기 때문입니다.
올바른 방법은array.length = 0;
어쨌든 JavaScript는 업데이트 되었고 Vue.js라는 프레임워크가 있습니다.
Vue가 잡히지 않음array.length = 0;
반응하지 않게 하려고요하지만 잡히긴 하죠array = [];
사용할 수 있습니까?array = [];
아니면 아직 JavaScript가 고장났나요?
뭐랄까...myArray.splice(0)
는 어레이의 내용을 클리어하고, 그 내용도 반응합니다.
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
items: ["a", "b", "c"]
}
},
methods: {
flush() {
this.items.splice(0);
}
}
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div v-for="i in items">{{i}}</div>
<button @click="flush"> flush</button>
</div>
Vue는 어레이에 대한 다음과 같은 변경 사항을 감지할 수 없습니다.인덱스를 사용하여 항목을 직접 설정하는 경우(예: vm.items[indexOfItem] = newValue 어레이 길이를 수정하는 경우(예: vm.tem.length = newLength)
시작: 깊이 있는 반응성(어레이용)
리액티브 어레이의 클리닝은 다음과 같습니다.
yourArray.splice(0)
언급URL : https://stackoverflow.com/questions/57834381/clearing-an-array-content-and-reactivity-issues-using-vue-js
반응형
'source' 카테고리의 다른 글
Vue 앱이 VM을 사용할 때 이벤트 청취자에게 추가 매개 변수를 전달할 수 있는 방법은 무엇입니까?$once()? (0) | 2022.08.18 |
---|---|
C의 객체 지향 프로그래밍 (0) | 2022.08.18 |
'errno'가 무슨 뜻인지 어떻게 알죠? (0) | 2022.08.18 |
Weak Hash Map이란 무엇이며 언제 사용해야 합니까? (0) | 2022.08.18 |
Spring Rest Template - 요청/응답의 완전한 디버깅/로그를 활성화하려면 어떻게 해야 합니까? (0) | 2022.08.18 |