-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
reactive( array ) 선언 후 array에 filter를 사용하면 반응이 안되요
22.12.22 18:54 작성 조회수 780
1
let itemsReactive = reactive([
{ id: 1, name: '딸기1', check: true },
{ id: 2, name: '딸기2', check: true },
{ id: 3, name: '딸기3', check: true },
{ id: 4, name: '딸기4', check: true },
]);
const deleteItemReactive = id => {
let tempItems = itemsReactive.filter(item => item.id !== id);
itemsReactive = tempItems;
};
const updateItemReactive = id => {
let tempItem = itemsReactive.find(item => item.id === id);
tempItem.check = !tempItem.check;
};위 코드에서 updateItemReactive 함수는 check값이 true, false 바뀌는 것을 확인할 수 있는데
deleteItemReactive 함수를 사용하면 반응이 안되고 있습니다.
vuejs devtools로 확인해보니까 바뀌기 전에는 ItemsReactive = Reactive이고 배열 안에 요소들은 Object인데
deleteItemReactive 함수를 실행하면
ItemsReactive = Array 이고 배열 안 요소들이 Reactive로 바뀌는 것을 확인했습니다. 왜 이렇게 나오는지 모르겠습니다.
답변을 작성해보세요.
0
짐코딩
지식공유자2022.12.22
안녕하세요 :)
deleteItemReact 함수 호출시 반응이 안되는 이유는 itemsReactive = tempItems; 값(메모리) 자체를 변경하기 때문입니다.
만약 배열의 전체값을 변경하고 싶다면 아래 처럼 ref함수를 사용하여 문제를 해결할 수 있습니다.
let itemsReactive = ref([
{ id: 1, name: '딸기1', check: true },
{ id: 2, name: '딸기2', check: true },
{ id: 3, name: '딸기3', check: true },
{ id: 4, name: '딸기4', check: true },
]);
const deleteItemReactive = (id) => {
let tempItems = itemsReactive.value.filter((item) => item.id !== id);
itemsReactive.value = tempItems;
};
const updateItemReactive = (id) => {
let tempItem = itemsReactive.value.find((item) => item.id === id);
tempItem.check = !tempItem.check;
};관련하여 설명은 해당 강의 [반응형 기초 강의 5분 31초] 쯤 보시면 같은 맥락이기 때문에 한번 보시는 것을 권장드려요.
이렇게 반응이 안되는 이유는 자바스크립트 언어 특성상 변수에 새로운 값이 할당 하기 때문이에요.
(참고 Call By Value & Call By Reference)
감사합니다 🙂
휘리릭
2023.03.16
안녕하세요 글쓰신분이랑 비슷한 생각을 해서 질문드립니다! 그러면 반영이 되지 않는 이유가 ItemsReactive가 가지고 있던 reactive 속성들이 새로운 데이터에 의해 덮어진거라고 생각을 하는게 맞는걸까요..?
답변 1