我有一个简单的设置。为了检索数据,使用了“计算的”。遵循简单条件后,有时应更改数据。然后,我希望数据中的更改将再次触发“计算”。但这种情况并非如此。我当前的解决方案是setTimeout,因为这会再次触发“计算”。
这是codepen链接:https://codepen.io/MH88/pen/oMbBzZ?editors=1011
此处是代码段。
//HTML Output
<div id="app" class="l-container l-vPad--mid">
<h1>This should return 4</h1>
<h2>getNumber: {{getNumber}}</h2>
</div>
//Javascript logic
new Vue({
el: '#app',
data: {
number: 5
},
computed: {
getNumber() {
var x = this.number;
if(this.number == 5) {
//Why is this not working?As data changes, the computed should
//react to it again, no?
this.number--;
//This solution works but there needs to be something more eloquent
//setTimeout(() => {this.number--}, 0);
}
return x
}
}
});
期待一些想法。
答案 0 :(得分:2)
您当前没有按照设计的方式使用计算所得的属性。
实际上,我们有data
来定义初始数据。如果您以这种方式定义数据:
data() {
return {
number: 5
}
}
您可以使用this.number
访问您的电话号码。您需要将其定义为一个函数,因为每次创建组件时都需要调用此函数。将其定义为函数会阻止在不同组件之间使用相同的对象引用,从而引起各种麻烦。
计算属性是一种基于其他数据计算属性的函数。当计算属性依赖于数据时,会自动重新计算。这会自动运行,但仅在该功能没有副作用的情况下。您的计算函数确实有副作用(即,它更改了组件上的数据),从而阻止了该机制的工作。计算属性的一个示例是
computed: {
differenceFromHundred() {
return 100 - this.number;
},
numberThatCannotBeFive() {
let x = this.number;
if (x === 5) {
return x - 1;
}
return x;
}
}
如果函数确实有副作用,则必须使用一种方法。方法在调用它们时会返回一个值,就像常规函数一样。
methods: {
// This name is misleading. You expect it to just 'get a value', but instead
// it modifies it sometimes
getNumber () {
let x = this.number;
if(this.number === 5) {
this.number--;
}
return this.number
}
}
目前尚不清楚为什么要修改number的值,但是请考虑是否可以在不更改number的值的情况下使用计算属性获得所需的输出。如果必须更改该值,请在一个单独的函数中进行更改,该函数可以从生命周期挂钩或显式操作(例如,单击或事件)中调用。在其余的代码中,您将可以按原样使用this.number
。
答案 1 :(得分:0)
您要返回的变量'x'的值为'5',因为您使用'var x = this.number'保存了该变量。不要返回保存的值“ return x”,而是使用“ return this.number”
只需将return x
替换为return this.number
跟随this.number--;
会减小number的值,但是由于您没有使用数据属性{{number}}
,因此不会显示它。
只要看一下,您就会明白。我希望。 updated code
计算的属性是函数,因此您应该返回更改后的值。 查看文档Computed Properties
希望有帮助。
答案 2 :(得分:0)
在javascript中,primitive types是passed by value。您正在变量this.number
中保存x
的值。此变量x
是全新的副本。因此,更改this.number
并不意味着x
也会更改。因此,更改x
的值。