检查存储 vuex 中的 json 数组是否为空

Question

如果我的对象数组有一些数据，我想显示一个按钮，所以在我的商店 (vuex) 中，basilcy 我定义了一个这样的数组：

state: {
    document: []
},

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

所以我想在有数据时显示按钮：

<div class="row margin-above">
    <div class="panel panel-primary" v-for="section in this.$store.getters.getDocument">
        <div class="panel-body quote" >
            <p>{{section.key}}</p>
        </div>
    </div>
    <div v-if="this.$store.getters.getDocument != '[]'">
        <button class="btn btn-success btn-block">Create Document</button>
    </div>
</div>

有按钮，如果条件匹配，我想用按钮隐藏整个 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 "getDocument"，如果是这样，请在您的组件中添加一个计算的属性，它比引用商店 [=17] 更清晰、更可重用=]s 直接在模板中：

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

在模板中：

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

检查存储 vuex 中的 json 数组是否为空

Check if json array is empty at store vuex

javascript

json

vue.js

vuejs2

vuex