Question

是否可以重新计算Vue中的计算属性？我有一个简单的订单项总计（价格x数量）。如果选中此框并且更改了输入值，那么将重新计算该属性。如果我取消选中此框，则保留计算所得的属性。我想要的行为是将显示的值重置为0。我在考虑添加一个隐藏值，该值在复选框切换时设置为1或0，然后将其添加到乘法中-即this.line_units * this.line_rate * this.is_toggled ，但似乎有点黑。任何人都有更好的方法吗？

<template>
<tr :class="{ 'row-disabled': !enabled }">
    <td><input type="checkbox" @change="toggle" :value="checkbox" class="form-check-input" :checked="enabled"></td>
    <td>{{ description }}</td>
    <td><input type="number" min="0" @change="setLineUnits" :value="line_units" class="form-control" :disabled="!enabled"></td>
    <td><input type="number" min="0" @change="setLineRate" :value="line_rate" class="form-control" :disabled="!enabled"></td>
    <td>${{ total.toFixed(2) }}</td>
</tr>
</template>
<style lang="scss">
.row-disabled {
background: #ddd;
color: #555;
}
</style>
<script>
export default {
data() {
    return {

    };
},
computed: {
    total: {
        cache: false,
        get: function() {
            if (this.enabled) {
                return this.line_units * this.line_rate;
            } else return 0;
        }
    }
},
methods: {
    toggle() {
        this.$emit('lineInput', {
            enabled: !this.enabled
        })
    },
    setLineUnits(evt) {
        this.$emit('lineInput', {
            line_units: Number(evt.target.value)
        })
    },
    setLineRate(evt) {
        this.$emit('lineInput', {
            line_rate: Number(evt.target.value)
        })
    }
},
props: {
    enabled: {
        type: Boolean,
        required: true
    },
    description: {
        type: String,
        required: true
    },
    line_rate: {
        type: Number,
        required: true
    },
    line_units: {
        type: Number,
        required: true
    }
}
}
</script>

Answer 1

您没有更改任何值，因此不会触发@changed事件。 enabled未绑定到输入，:changed/:value属性仅是一种绑定方式。

我建议您使用@click，除非您有其他一些不想这样做的理由。

强制重新计算为Vue计算属性？

1 个答案: