Vue.js - 입력, v-model 및 계산된 속성

Vue.js - 입력, v-model 및 계산된 속성

사용하고 있다vue-2.4그리고.element-ui 1.4.1.

상황.

나는 기본이 있다.input와 관련지어져 있다.v-model에 대해서computed property.언제blur값 입력이 다음 값보다 큰지 낮은지 확인합니다.min그리고.max난 내가 해야 할 일을 하는 거야여긴 화려한 게 없어.

문제

입력에 표시된 값이 항상 동일하지는 않습니다.enteredValue

재현 순서

1) 입력60--> 표시된 값은 최대값입니다.50그리고.enteredValue는50(괜찮습니다)

2) 외부 클릭

3) 입력80--> 표시된 값은80그리고.enteredValue는50

문의사항

표시되는 값이 항상 같은 값으로 변경되도록 하려면 어떻게 해야 합니까?enteredValue?

JSFIDDLE을 재현하기 위한 최소한의 코드입니다.

    <div id="app">
  The variable enteredValue is {{enteredValue}}
  <el-input v-model="measurementValueDisplay" @blur="formatInput($event)"></el-input>
</div>

var Main = {
  data() {
    return {
      enteredValue: '',
      max: 50,
      min: 10
    }
  },
  computed: {
      measurementValueDisplay: {
          get: function () {
              return this.enteredValue + ' inchs'
          },
          set: function (newValue) {
          }
     },
  },
  methods: {
      formatInput($event) {
         let inputValue = $event.currentTarget.value;
         if (inputValue > this.max) { this.enteredValue = this.max}
         else if (inputValue < this.min) { this.enteredValue = this.min}
         else this.enteredValue = inputValue
      }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

이 vuej를 읽으면 어떤 일이 일어나는지 이해할 수 있습니다.

"이러한 속성은 종속성에 따라 캐시됩니다. 계산된 속성은 종속성의 일부가 변경된 경우에만 재평가됩니다."

코드의 컴포넌트를 변경했습니다.실행 완료:computed()창의 업데이트 값에 대해 메서드가 제대로 작동하지 않습니다.그러나 콘솔을 보면 yes 값이 업데이트되었습니다.그래서 계산(getter와 setter)을 제거하고 setter와 getter를 사용하지 않고 데이터에 넣습니다(javascript에서는 이 점이 마음에 들지 않습니다).

var Main = {
  data() {
    return {
      measurementValueDisplay:'fff',
      enteredValue: '',
      max: 50,
      min: 10
    }
  },
  computed: {
      /*measurementValueDisplay: {
          get: function () {
              console.log('Computed was triggered so I assume enteredValue changed',this.enteredValue);
              return this.enteredValue + ' inchs'
          },
          set: function (newValue) {
          console.log('setter de qye', this.enteredValue);
          }
      },*/
  },
  methods: {
      formatInput($event) {
          this.enteredValue = 0;
          
          let inputValue = $event.currentTarget.value;
          console.log(inputValue);
          if (inputValue > this.max) { this.enteredValue = this.max}
          else if (inputValue < this.min) { this.enteredValue = this.min}
          else this.enteredValue = inputValue
          this.measurementValueDisplay = this.enteredValue + ' inchs'
          
          console.log(this.enteredValue, 'oioioioio0');
      }
   }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

문제는 계산 속성에 사용된 값이 50에서 검증 상한으로 업데이트되지 않았다는 것입니다(Was 50, 현재 50으로 업데이트됨, 다시 계산할 필요가 없음).v-model는 입력을 갱신하지 않았습니다.

두 가지 계산 속성을 사용하도록 jsfiddle을 편집했습니다.
입력된 값을 검증하기 위한 접근자가 있는 접근자, "인치"가 추가된 값을 반환하는 접근자.

다음은 흥미로운 부분입니다.

    computed: {
          measurementValueDisplay: {
              get: function () {
                  return this.enteredValue
              },
              set: function (newValue) {
                 this.enteredValue = 0;
                 let inputValue = parseInt(newValue);
                 if(Number.isNaN(inputValue)){this.enteredValue = this.min}
                 else if (inputValue > this.max) { this.enteredValue = this.max}
                 else if (inputValue < this.min) { this.enteredValue = this.min}
                 else this.enteredValue = inputValue
              }
         },
         valueWithInch(){
            return this.enteredValue + " inch";
             }
      },

아직 해킹이 필요한 사용자가 있는 경우 항상 변경되는 값(예: 타임스탬프)을 사용할 수 있습니다.

var Main = {
  data() {
    return {
      enteredValue: '',
      max: 50,
      min: 10,
      now: 1 //line added
    }
  },
  computed: {
      measurementValueDisplay: {
          get: function () {
              return (this.now - this.now + 1 ) * this.enteredValue + ' inchs'; //line changed
          },
          set: function (newValue) {
              this.now = Date.now(); //line added
          }
     },
  },
  methods: {
      formatInput($event) {
         let inputValue = $event.currentTarget.value;
         if (inputValue > this.max) { this.enteredValue = this.max}
         else if (inputValue < this.min) { this.enteredValue = this.min}
         else this.enteredValue = inputValue
      }
  }
}

언급URL : https://stackoverflow.com/questions/45464410/vue-js-input-v-model-and-computed-property