캐시가 없는 VueJs 계산 속성
입력 필드인 컴포넌트가 있습니다.이 필드는 3개의 케이스를 받아들여 내부 상태(번호)로 변환합니다.
- 입력: 없음(빈 문자열);상태: 정의되지 않음; 클래스: is-empty; 값: 빈 문자열
- 입력: 임의의 양수; 상태: 양수; 클래스:; 값: 양수
- 입력: ; 상태: -1, 클래스: is-unknown, 값:
- 그렇지 않은 경우:상태: -2; 클래스: is-invalid; 값: 빈 문자열
이 컴포넌트는output
내부 상태를 변경하는 세터와 내부 상태를 기준으로 비활성화된 경우 숫자, 대시 또는 빈 문자열 중 하나를 반환하는 getter가 포함된 계산된 속성입니다.필드를 비워두고 싶은 비활성 입력에 대한 특수한 경우입니다.
첫 번째 비활성 문자의 경우 정상적으로 동작하지만 다음 문자는 필드에 표시됩니다.내부 상태가 계속 켜져 있기 때문에 값이 캐시된 것으로 추측됩니다.invalid
캐시가 사용됩니다.
<template>
<input v-model="output" v-bind:class="state"/>
</template>
<script>
export default {
name: 'TsResult',
props: ['result'],
data: function() {
return {
res: this.result
}
},
computed: {
state: function() {
// ..
if (this.res === -2) {
return 'is-invalid'
} else if (this.res === -1) {
return 'is-unknown'
}
// ...
},
'output': {
set: function(newVal) {
//..
if (isInvalid(newVal)) {
this.res = -2;
} else if (isUnknwon(newVal)) {
this.res = -1;
}
// ...
},
get: function() {
if (this.res === -2 ) { // Invalid
return ''
} else if (this.res === -1) { // Unknown
return '-'
}
// ...
}
}
</script>
검증을 수행하려면 설정기가 필요하므로 계산된 getter 대신 메서드를 사용하는 것은 해당되지 않습니다.
또한 비활성 상태에서는 입력 값이 변경되고(빈 문자열을 설정함으로써) 빈 문자열을 받아들이는 워처가 다시 트리거되므로 워처를 사용하는 것은 좋은 방법이 아닙니다.따라서 비활성 상태는 표시되지 않습니다.
이 계산된 속성에 대한 캐싱을 비활성화할 수 있습니까? 아니면 더 나은 대안이 있습니까?
가능한 해킹은 비활성 상태의 내부 상태를 감소시켜 내부 상태가 변화하고 값이 재계산되도록 하는 것입니다.하지만 나는 더 나은 해결책을 갖고 싶다.
패스 acache
속성 설정false
는 계산 속성에 대한 캐시를 비활성화해야 합니다.자세한 내용은 문제 #1189 - 계산 속성 캐싱을 옵션화 및 관련 커밋을 참조하십시오.
실제 키 입력을 수신하는 보이지 않는 입력 필드를 덮어 계산한 속성을 아래 표시된 항목으로 출력할 수 있습니까?
분할하는 것은 어떨까요?v-model
에v-bind
그리고.v-on:input
대략적으로 (테스트를 위해 누락된 기능을 추가):
<template>
<input v-bind:value="output_computed()" v-on:input="on_input($event.target.value)" v-bind:class="state"/>
</template>
<script>
function isValid(val) {
return parseInt(val) != NaN && parseInt(val) >= 0;
}
function isInvalid(val) {
return parseInt(val) == NaN || parseInt(val) < 0;
}
function isUnknown(val) {
return !(isValid(val) || isInvalid(val));
}
export default {
name: "TsResult",
props: ["result"],
data() {
return {
res: this.result,
v: ""
};
},
methods: {
output_computed() {
if (this.res === -2) {
// Invalid
return "";
} else if (this.res === -1) {
// Unknown
return "-";
} else if (this.res === -3) {
return "";
} else if (this.res === 0) {
return this.v;
}
},
on_input(newVal) {
if (isInvalid(newVal)) {
this.res = -2;
} else if (isUnknown(newVal)) {
this.res = -1;
} else if (newVal === "") {
this.res = -3;
} else if (isValid(newVal)) {
this.res = 0;
this.v = newVal;
}
this.$emit("input", this.output_computed());
}
}
};
</script>
codesandbox.io에서 라이브로 보실 수 있습니다.
언급URL : https://stackoverflow.com/questions/49873998/vuejs-computed-property-without-caching
'programing' 카테고리의 다른 글
vuex 로그에서 다음 상태와 이전 상태를 숨기는 방법 (0) | 2022.08.17 |
---|---|
vuex에 저장된 json 데이터 추가 및 읽기 (0) | 2022.08.17 |
ES/TS 혼합 프로젝트에서 Vue 구성 요소 사용 (0) | 2022.08.17 |
VueX 스토어 필드의 값을 사용하여 컴포넌트를 초기화하려면 어떻게 해야 합니까? (0) | 2022.08.17 |
Vuetify 목록 내 VueJs에서 Vuex 스토어에서 상태를 가져오는 방법 (0) | 2022.08.17 |