检查商店vuex上的json数组是否为空

Question

如果我的对象数组有一些数据，我想显示一个按钮，所以我的商店（vuex）中的罗勒我定义了一个这样的数组：

execfile(filename.py)

我从其他组件向这个数组附加数据，我已经检查过数据是否正确附加，这里没问题。

所以我想显示按钮，如果有一些数据：

state: {
    document: []
},

有按钮，如果条件匹配，我想用按钮隐藏整个div，但它不起作用按钮总是在那里，有什么帮助吗？

Answer 1

检查它的长度属性。

<div v-if="this.$store.getters.getDocument.length != 0">
    <button class="btn btn-success btn-block">Create Document</button>
</div>

或者在没有元素的情况下将vuex变量分配给null。比这更适合。

<div v-if="this.$store.getters.getDocument">
    <button class="btn btn-success btn-block">Create Document</button>
</div>

Answer 2

在您的商店中，您定义了getter＆＃34; getDocument＆＃34;，如果是这样，在组件中添加计算属性，它更清晰，更可重用，然后直接引用模板中的商店getter：

computed : {
   document: function() { 
       return this.$store.getters.getDocument; 
   }
}

在模板中：

<div v-if="document.length">
    <button class="btn btn-success btn-block">Create Document</button>
</div>