我对Vue和Js很新,我对计算方法有点困惑。如下所示,我创建了一个 props 来共享来自父组件的数据。一切正常,但当sumTotal方法作为默认值执行时,它会在{{sumTotal}}上显示 Nan 。我想知道如何将int 0渲染为sumTotal值的默认值。
//parent component
<my-colors :myProp="selectedShape.price"></my-colors>
</template>
<script>
import Colors from './Colors.vue';
export default {
data() {
return {
selectedShape: {},
shapes: [{
id: 1,
name: "Square",
price: 4,
}, {
id: 2,
name: "Circle",
price: 6,
}]
}
},
computed: {
totalShape: function() {
var totalShape = 0;
for (var i = 0; i < this.shapes.length; i++) {
if (this.shapes[i].selected) {
totalShape += this.shapes[i].price;
}
}
return totalShape;
}
},
methods: {
getSelectedShape() {
return this.selectedShape;
},
}
}
</script>
//child component
<v-layout row v-for="color in colors" :key="color.id">
<v-layout >
<v-flex >
<v-checkbox class="text-xs-right" name="checkbox" v-bind:label="`${color.name}`" v-model="color.checked" light></v-checkbox>
</v-flex>
</v-layout>
<v-layout column>
<v-flex >
<v-subheader>{{color.price}} €</v-subheader>
</v-flex>
</v-layout>
<v-subheader> {{sumTotal}} €</v-subheader>
</v-layout>
<script>
export default {
props: ['myProp'],
data: () => ({
colors: [{
id: 1,
name: "White",
price: 5,
}, {
id: 2,
name: "Green",
price: 4,
}, {
id: 3,
name: "Blue",
price: 3,
}, {
id: 4,
name: "Red",
price: 2,
}, {
id: 5,
name: "Purple",
price: 1,
}, {
id: 6,
name: "Yellow",
price: 0,
}],
}),
computed: {
total: function() {
var total = 0;
for (var i = 0; i < this.colors.length; i++) {
if (this.colors[i].checked) {
total += this.colors[i].price;
}
}
return total;
},
sumTotal: function() {
var myProp = 0;
return this.total + this.myProp;
}
},
}
</script>
答案 0 :(得分:1)
当您的子组件第一次呈现时,您的父组件的数据属性selectedShape
等于{}
,因此传递给子组件的selectedShape.price
属性,将undefined
,当您调用sumTotal
方法时,它会返回someNumber + undefined
,即NaN
。
要解决此问题,您应该为price
属性设置默认selectedShape
值:
selectedShape: { price: 0}
或者您可以更改sumTotal
:
sumTotal: function() {
return this.total + (this.myProp || 0);
}