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

【问题标题】：Check if json array is empty at store vuex检查存储 vuex 的 json 数组是否为空
【发布时间】：2018-01-09 14:11:33
【问题描述】：

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

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，但它不起作用按钮总是在那里，有什么帮助吗？

【问题讨论】：

为什么在this.$store.getters.getDocument != '[]' 中使用单引号？ document 不是数组吗？
我也试过了，结果一样
如果你这样做v-if="document.length > 0" 会怎样？
@FilipeCosta 是的，如果你的document 是一个数组，你不应该使用“！=”，参见：stackoverflow.com/questions/40313263/why-is-in-javascript
有道理，我在睡觉:)

标签： javascript json vue.js vuejs2 vuex

【解决方案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>

【讨论】：

工作，不知道我尝试过类似的东西，谢谢你的朋友：D

【解决方案2】：

您是否在您的商店中定义了 getter“getDocument”，如果是这样，请在您的组件中添加一个计算属性，它比直接在模板中引用商店 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>

【讨论】：