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確定空對象的正確方法

回答

相關問題