Vuejs가 입력의 포커스를 잃을 때까지 모델을 업데이트하지 않는 이유

Vuejs가 입력의 포커스를 잃을 때까지 모델을 업데이트하지 않는 이유

내 앱은 다음과 같은 데이터로 작동합니다.각각 데이터 포인트 리스트를 가지고 있는 기업이 있습니다.각 데이터 포인트는 1개의 타입을 가지며 각 회사는 각 타입의 1개의 데이터 포인트만 가질 수 있습니다.

+Company_1  
|  
|--Datapoint_1 : type_1  
|--Datapoint_2 : type_2  
|--Datapoint_3 : type_3  
|  
|  
+Company_2  
|  
|--Datapoint_4 : type_3  
|--Datapoint_5 : type_2  
|  
|+Company_3  
|  
|--Datapoint_6 : type_2  
...  
...  

총 1000개의 데이터 포인트와 20개의 회사가 있습니다.이 앱은 이러한 데이터 포인트를 기반으로 분석을 계산하며, 목표는 사용자가 이러한 데이터 포인트를 조작하여 주어진 시나리오에서 결과가 어떻게 보이는지 보는 것입니다.어느 시점에서든 "selected_company"와 "selected_type"이 존재하며, 이 두 가지 선택에 따라 조작을 위해 올바른 데이터 포인트를 선택해야 합니다.

"회사" 변수와 "데이터포인트" 속성이 배열일 경우 올바른 항목을 찾기 위해 모든 항목을 검색해야 한다는 것을 깨달았습니다.그래서 나는 그것들을 오브젝트로 삼기로 했다.

companies = {
  '1' : {
    name : 'Company_1',
    datapoints : {
      'type_1' : { ... },
      'type_2' : { ... },
      'type_3' : { ... }
    }
  },
  '2' : {...},
  '3' : {...},
  .
  .
  .
}

문제:

데이터 포인트를 소품으로 전달하고 있는 '데이터 포인트' 컴포넌트가 있습니다.

<datum-comp :datum="companies[selected_company].datapoints[selected_type]"></datum-comp>

이 구성 요소에는 데이터 포인트의 점수 속성을 조작하는 데 사용되는 입력이 있습니다.

<input v-model.number="datum.score" class="form-control">

단, 이 입력은 매우 이상한 동작을 나타내고 있습니다.입력 내용을 입력해도 모델이 바로 업데이트되지 않습니다.대신 Vue는 모델을 업데이트하기 전에 입력(onBlur)에서 포커스가 바뀌기를 기다리고 있는 것 같습니다.

온블러까지 업데이트 안 함

더 이상한 건 데이터 포인트 속성을 배열로 만들 때

companies = {
      '1' : {
        name : 'Company_1',
        datapoints : [
          { ... },
          { ... },
          { ... }
        ]
      },

(데이터포인트를 직접 전달하지 않고) 데이터포인트를 취득하는 방법을 사용하면 Vue는 올바르게 기능합니다.

<datum-comp :datum="getDatum(selected_company, selected_type)"></datum-comp>

(js 파일:)

var app = new Vue({
    el : '#app',
    data:{...},
    methods:{
      getDatum: function(selected_company, selected_type){
          var datum = this.companies[selected_company].datapoints.find(function(elem){
            return elem.type == selected_type
          })
          return datun
        }
    }
  })

올바르게 갱신하다

앱 성능에 심각한 영향을 미치기 때문에 이러한 상황에서 Vue가 왜 이렇게 동작하는지 이해하려면 도움이 필요합니다.잘 부탁드립니다.

v-model그냥 구문설탕일 뿐인데...
:value="modelValue" @input="modelValue = $event.target.value"
말씀하신 대로 모델 온 입력이 업데이트되므로 대부분의 경우 정상적으로 작동합니다.

다른 것을 원한다면, 그것은 매우 쉽다.업데이트 쪽을 단축키로 바꾸면...

<input  class="form-control
    :value="datum.score" 
    @keypress="datum.score = $event.target.value""
    @input="datum.score = $event.target.value""
>

데이터 포인트를 어레이에서 개체로 변경할 때 나타나는 변경은 Vue가 어레이 구문(대괄호)을 사용하여 어레이에서 수행된 변경을 감지할 수 없기 때문일 수 있습니다.어레이 방식(푸시, 팝, 스플라이스 등) 또는 Vue.set()을 사용해야 합니다.말씀하신 것처럼 직관적이지는 않지만 Vue에서는 몇 안 되는 트랩 중 하나입니다.javascript의 제한에 의한 것으로, document에 잘 기재되어 있습니다.

언급URL : https://stackoverflow.com/questions/48855281/why-vuejs-is-not-updating-model-until-input-loses-focus