VueJS가 구성 요소를 업데이트할 수 없습니다.

Question

저는 사용자가 채워야 하는 소품으로 개체를 가져오는 Vue 1 구성 요소를 가지고 있습니다.

객체의 구조는 다음과 같습니다.

으아아아

구성 요소는 필요한 모든 입력이 포함된 양식을 갖춘 간단한 모달입니다. 일부 내용을 확인하고, 계산을 수행하고, 사용자 입력에 따라 셀 스타일을 변경하고 싶습니다.

모달이 로드되면 페이지를 구축하고 해당 ID를 사용하여 이러한 입력에 대한 모델을 설정합니다.

v-model="object.inputs[subgroup[1].dx.mob.id].comment"

(참고: subgroup[1]是包含表结构“定义”的另一个对象的一部分，通过执行 inputs[subgroup[1].dx.mob.id] 연결된 테이블 필드가 개체의 해당 입력으로 예상됩니다.)

문제는 무엇을 시도해도 페이지가 다시 렌더링되지 않는다는 것입니다. <input> 필드에 값이 저장되어 있지도 않고, 클릭하면 사라집니다.

더 이상한 점은 값이 실제로 설정되어 있지만 구성 요소를 다시 렌더링하고 필요한 모든 검사와 스타일링을 수행하는 유일한 방법은 모달을 닫았다가 다시 열거나 설정하는 것입니다. 테이블의 부모에 v-if.

이것은 분명히 실현 가능한 옵션이 아닙니다

• 페이지가 반응해야 합니다
• 입력이 변경될 때마다 구성요소를 다시 생성하는 데 시간이 너무 많이 걸립니다

내가 시도한 방법은 다음과 같습니다.

• 각 입력에 대해 동적으로 관찰자를 구축합니다.
  • 하지만 vm.$watch 어떤 이유로 개체를 찾을 수 없습니다.

으아아아

• 계산된 속성에 입력을 반환하고 관찰하세요

  • 하지만 페이지에서 변경 사항을 감지할 수 없습니다

• @change 및 @input 이벤트에서 수동으로 시작 this.$forceUpdate()

  • 하지만 $forceUpdate는 함수가 아닙니다

• 데이터에 카운터를 선언하고 @change 및 @input 이벤트에서 이를 증가시킵니다.

  • 하지만 페이지가 아직 업데이트되지 않았습니다.

• 보이지 않는 물체에 v-if를 붙이세요

  • 하지만 해당 개체만 다시 렌더링됩니다

• data 속성을 사용하여 구성 요소의 :key 속성을 변경하세요

  • 아무 일도 일어나지 않았습니다

예상대로 내가 할 수 있는 유일한 방법은 구성 요소를 파괴하고 다시 만드는 것입니다.

해결책 있으신 분 계신가요?

못생긴 해결책: 몇 번 실패한 끝에 잘못된 방법으로도 작동하는 것을 찾았습니다. 어떤 진짜 답변은 여전히 ​​매우 환영합니다.

기본적으로 구성 요소를 강제로 다시 렌더링했습니다.

• 데이터에 새 변수를 선언하고 이름을 지정했습니다. key(제 경우에는 숫자지만 무엇이든 가능합니다)
• 1에서 0으로 또는 그 반대로 update 函数，将 key전환하는 업데이트 함수를 만듭니다.
• 이 기능을 각 입력 또는 선택 @blur 이벤트
에 바인딩하세요.
• 전체 모달은 계산된 속성을 기반으로 렌더링되므로 해당 함수 내에서 key에 대해 일부 읽기를 수행합니다( 내 경우는 그 값을 새 변수에 할당한 다음 기록하는 것입니다(아님. 두 트리거 중 어느 것이 렌더링을 트리거하는지 결정하지만 첫 번째 트리거는 다음과 같습니다. 그만))

으아아아

Answer 1

더 나은 답변

부드러운 디버깅 후에 이 문제를 성공적으로 해결했습니다.

기본적으로 질문에서 설명하는 구성 요소는 "만들기" 페이지와 "편집" 페이지라는 두 가지 페이지에 사용됩니다. 편집 페이지에서 모든 것이 예상대로 작동하는 것을 보고 가슴이 뛰었습니다.

무슨 일이 있었나요:

두 페이지에서 구성 요소가 사용되는 방식의 유일한 차이점은 전달되는 데이터입니다. "편집" 페이지에는 데이터가 이미 있으므로 모든 개체가 채워지는 반면, "만들기" 페이지에서는 모든 개체가 비어 있습니다.

사용 가능한 개체가 필요하므로 나중에 액세스할 수 있도록 빈 입력으로 채워야 합니다.

저는 어리석게도 다음과 같이 수동으로 속성을 설정해 보았습니다.

으아악

반응형 객체에 속성을 할당하면 해당 속성도 자동으로 반응형으로 변할 것으로 예상됩니다. 아, 내가 틀렸나?

Vue 반응형 getter 및 setter:

반응형으로 만들기 위해 vue는 기본 객체 클래스 getter 및 setter를 재정의합니다. 하지만 이는 특정 조건에서만 발생합니다:

• 이 속성은 Vue.set() 或 this.$set()
을 통해 추가되어야 합니다.
• 모든 상위 속성도 반응형이어야 합니다

예를 들어 몇 번 시도한 후 objects[index].inputs = {} 后，我尝试使用 this.$set()를 설정하여 입력 내용을 채웁니다.

이 역시 .inputs 반응성을 만들지 않았기 때문에 작동하지 않습니다.

그래서 난 그래야만 했어

으아악

전

으아악

결론:

반응성 문제가 있는 경우 해당 객체를 기록하고 해당 객체와 해당 상위 객체에 올바른 getter 및 setter가 있는지 확인하는 것이 좋습니다.

반응형 개체에 새 속성을 추가하려면 해당 속성을 $set()해야 한다는 점을 기억하세요.

반응 개체:

비반응성 개체: