Question

初学者警报....我试图了解如何将我的一些逻辑从我的视图/ HTML移动到Vue实例中。假设我的HTML中包含以下代码。我如何将其移动到我的计算属性中？

示例HTML：

<section v-if="(!selectedOffice.inJira) && (selectedProducts === 'Movies')">

示例Vue实例：

var app = new Vue({
    el: '#app',
    data: {
        selectedOffice: '',
        selectedProducts: []
    }
    computed: {
        function() {
        }
    }
});

由于我在我的应用程序中大量使用v-if指令，我有兴趣了解如何将其移动到计算属性将是有益的。谢谢。

Answer 1

您只需在计算属性中返回已计算的表达式，即：

var app = new Vue({
    el: '#app',
    data: {
        selectedOffice: '',
        selectedProducts: []
    }
    computed: {
        isSelected: function() {
            return !this.selectedOffice.inJira && this.selectedProducts === 'Movies';
        }
    }
});

在您的模板中，您可以使用：

<section v-if="isSelected">

但是，您的逻辑可能存在几个问题，因为：

this.selectedOffice是字符串而不是对象，因此尝试访问.inJira可能是个问题。您应该使用声明selectedOffice作为空对象。
this.selectedProducts是一个数组，但您尝试将其计算为计算属性中的字符串

将v-if逻辑移动到模型

1 个答案: