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

经典场景：我想显示一个列表，但是当它为空时，我想显示“无数据”。vue.js确定空对象的正确方法

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

这是我目前的解决方案。

<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>

难道还有比这更好的解决办法？

来源

2016-12-16 Finch_Powers

你可以只使用inventory长度v-if，像以下：

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

鉴于inventory变量是一个哈希，而不是一个数组，你可以使用下面的任何发现它是空的，用在v-if：

ECMA 5+：

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

预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>

来源

2016-12-17 03:55:28 Saurabh

这是行不通的。库存不是数组，它是一个对象，而对象没有“.length”属性。 –

@Finch_Powers我错过了，我已经相应地更新了答案。 – Saurabh

我试过

No item in inventory

以及jQuery.isEmptyObject（inventory）;它不起作用。我有一个警告，指出vue无法评估表达式。 –

您可以使用 v-if="inventory == ''"

来源

2017-10-25 14:48:12

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

回答

相关问题