vue.js 确定空对象的正确方法答案

【问题标题】：vue.js proper way to determine empty objectvue.js 确定空对象的正确方法
【发布时间】：2017-05-02 17:13:29
【问题描述】：

经典场景：我想显示一个列表，但是当它为空时我想显示“无数据”。

做一些我认为很简单的事情有点复杂，这让我觉得我可能做错了。

这是我目前的解决方案。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<div id="element">
  <div v-if="empty">No item in inventory</div>
  <div v-for="(index, item) in inventory">
    {{item.key}}<button onclick="remove('{{index}}')">remove</button>
  </div>
</div>

<script type="text/javascript">
"use strict";
var vm;
$(function() {
    vm = new Vue({
        el: '#element',
        data: {
            inventory: {"id1" : {"key" : "val1"}, "id2" : {"key" : "val2"}},
            empty: false
        },
        watch: {
            inventory: function() {
                vm.empty = $.isEmptyObject(vm.inventory);
            }
        }
    });
});

function remove(key) {
  Vue.delete(vm.inventory, key);
}
</script>

还有比这更好的解决方案吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

您可以在v-if 中只使用inventory 的长度，如下所示：

<div id="element">
  <div v-if="!inventory.length">No item in inventory</div>
  <div v-for="(index, item) in inventory">
      {{item.key}}
      <button v-on:click="remove(index)">remove</button>
  </div>
</div>

鉴于inventory 变量是一个散列而不是一个数组，您可以使用以下任何一种方法来查找它为空并在v-if 中使用它：

ECMA 5+:

Object.keys(inventory).length === 0

Pre-ECMA 5：

function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }

    return JSON.stringify(obj) === JSON.stringify({});
}

由于您已经在使用jquery，您也可以这样做：

jQuery.isEmptyObject({}); // true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<div id="element">

  <div v-if="isEmpty">No item in inventory</div>
  <div v-for="(index, item) in inventory">
      {{item.key}}<button @click="remove(index)">remove</button>
  </div>
</div>

<script type="text/javascript">
"use strict";
var vm;
$(function() {
    vm = new Vue({
        el: '#element',
        data: {
            inventory: {"id1" : {"key" : "val1"}, "id2" : {"key" : "val2"}},
            empty: false
        },
        methods: {
            remove: function(index) {
                Vue.delete(this.inventory, index);
                
            }
        },
        computed: {
           isEmpty: function () {
              return jQuery.isEmptyObject(this.inventory)
           }
       }
    });
});
</script>

【讨论】：

这不起作用。库存不是一个数组，它是一个对象，并且对象没有“.length”属性。
@Finch_Powers 我错过了，我已经相应地更新了答案。
我试过
No item in inventory
以及 jQuery.isEmptyObject(inventory);它不起作用。我有一条警告指出 vue 无法评估表达式。
Object.keys(yourObject).length === 0 这真的有效！
在你的第一个例子中，应该是v-if="!inventory.length"（如果没有任何长度）

【解决方案2】：

你可以用这个 v-if="(YOUR_OBJECT).total == 0"

【讨论】：

【解决方案3】：

搜索了几分钟后，我想出了一个更好的解决方案来检查 object 是否为空。

Object.keys( YOUR_OBJECT ).length == 0 // Check if it's empty.

如果为空，它将返回 0。如果您想检查 array 是否为空，您绝对可以使用下面的解决方案，

YOUR_ARRAY.length == 0  // Check if it's empty.

在我的例子中，它是一个 object，而不是 array。因此，它也可能有所帮助。快乐编码:)

【讨论】：

这对我有用。

【解决方案4】：

如果是数组，可以使用

v-if="!array.length"

【讨论】：

【解决方案5】：

<div v-if="Object.length > 0 ">
  //Write your logic here
</div>
<div v-else>
 No Records found
</div>

【讨论】：

【解决方案6】：

对我来说效果很好......

v-if="array.length == 0"

【讨论】：

这会发出警告Comparison array.length == 0 may cause unexpected type coercion。而v-if="!array.length" 没有。这是因为双相等而不是三等。
支持上面提到的@ILovePHP。 JavaScript 的最佳实践是使用=== 而不是==。