不需要缓存的VueJs计算属性
不需要缓存的VueJs计算属性
提问于 2018-04-17 09:05:29
我有一个组件，它是一个输入字段，接受三种情况并将它们转换为内部状态(数字)：
- 输入:无(空字符串)；状态:未定义；类:是空；值:空字符串
- 输入:任意正数；状态:正数；类：；值:正数
- 输入：
-；状态：-1；类:is-未知；值：- - 否则:状态：-2；类:是无效的；值:空字符串
该组件具有一个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是不适用的，因为我需要setter来执行验证。
使用观察者不是一个好主意，因为无效状态会改变输入值(通过设置空字符串)并重新触发接受空字符串的观察者。因此，无效状态永远不会显示。
是否可以禁用此计算属性上的缓存，或者是否有更好的替代方案？
一种可能的方法是减少无效状态的内部状态，以便重新计算内部状态变化和值。但我希望有一个更好的解决办法。
Stack Overflow用户
回答已采纳
发布于 2018-04-17 09:26:00
将cache属性设置为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上
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49873998
复制相关文章
相似问题
腾讯云开发者
