사용자가 채워야 하는 소품으로 개체를 가져오는 Vue1 구성 요소가 있습니다. 객체의 구조는 다음과 같습니다. {property1:...,property2:...,inputs:{2130:{value:...,comment:...},2131:{...},... , }}구성요소는 필요한 모든 입력이 포함된 양식을 갖춘 간단한 모달입니다. 일부 내용을 확인하고, 계산을 수행하고, 사용자 입력에 따라 셀 스타일을 변경하고 싶습니다. 모달이 로드되면 해당 ID를 사용하여 페이지를 빌드합니다.

저는 사용자가 채워야 하는 소품으로 개체를 가져오는 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에 대해 일부 읽기를 수행합니다( 내 경우는 그 값을 새 변수에 할당한 다음 기록하는 것입니다(아님. 두 트리거 중 어느 것이 렌더링을 트리거하는지 결정하지만 첫 번째 트리거는 다음과 같습니다. 그만))

으아아아