Vue list item 변경 후 렌더링 되지 않습니다

Question

안녕하세요Jsp에서 리스트의 버튼에 클릭 이벤트를 넣었고 파라미터로 인덱스를 보냈습니다@click=“clickRow(idx)"자바스크립트에서this.list[idx].data = "데이터”;이렇게 처리했는데,동일한 로우에서 다시 클릭 시this.list[idx].data = "데이터변경”;이렇게 값을 변경하면 화면에 렌더링 되지 않습니다.this 에는 값이 들어가있는데 화면에서 보이지 않는 걸까요..다른 방법 시도var obj = {data : "데이터변경"}this.list.splice(idx,1,obj);위와 같이 쓰면 정상 작동하긴 합니다..

jghjghjg · Answer

Vue에서는 반응성(Reactivity) 시스템이 동작하는 방식 때문에, this.list[idx].data와 같이 직접 배열의 특정 요소를 수정하면 화면이 업데이트되지 않을 수 있습니다. 이를 해결하려면 Vue가 변경 사항을 감지하도록 해야 합니다. 다음은 관련 원인과 해결 방법입니다.---원인Vue는 배열의 항목 변경을 직접적으로 추적하지 못하는 경우가 있습니다. 특히, 아래와 같은 상황에서 문제가 발생합니다:1. 배열 항목의 속성을 직접 수정한 경우 (this.list[idx].data = "데이터").2. Vue의 반응성 시스템이 배열의 변경 사항을 인지하지 못하기 때문.---해결 방법1. splice 사용이미 시도한 방법처럼, Vue에서는 배열을 조작할 때 splice를 사용하는 것이 안전합니다. 이는 Vue가 배열의 변경 사항을 감지할 수 있도록 도와줍니다.this.list.splice(idx, 1, { ...this.list[idx], // 기존 데이터 유지 data: "데이터변경" // 변경 데이터});2. Vue.set 또는 this.$set 사용Vue 2에서는 Vue.set 또는 this.$set을 사용하여 Vue의 반응성을 유지할 수 있습니다.this.$set(this.list[idx], 'data', '데이터변경');Vue 3에서는 Vue.set 대신 직접 데이터를 변경해도 반응성을 유지하지만, 위의 문제처럼 업데이트가 안 되는 경우에는 구조를 수정해야 합니다.3. 깊은 복사 후 배열 교체깊은 복사를 통해 배열을 새로 할당하면 Vue가 변경 사항을 인식합니다.let newList = [...this.list];newList[idx].data = "데이터변경";this.list = newList;4. reactive 및 ref 사용 (Vue 3)Vue 3에서 reactive 또는 ref를 사용해 데이터를 감싸면 반응성을 보장할 수 있습니다. 예를 들어:import { reactive } from 'vue';const state = reactive({ list: [{ data: "데이터" }]});state.list[idx].data = "데이터변경";---정리문제를 간단히 해결하려면 다음 방법 중 하나를 사용하는 것이 좋습니다:1. this.$set(this.list[idx], 'data', '데이터변경')2. this.list.splice(idx, 1, {...this.list[idx], data: '데이터변경'})Vue 3에서는 반응성 시스템이 개선되었으므로 기본적으로 데이터 변경이 더 잘 감지됩니다. 다만 여전히 배열 조작은 주의가 필요합니다.

2948284 · Answer

{{data}} 를 필드에찍어서 실제로 바뀐지 본다.nextTick 해본다

Vue list item 변경 후 렌더링 되지 않습니다

2개의 답변

#vue3 목록