vue.js空のオブジェクトを決定する適切な方法

Question

従来のシナリオ：リストを表示するが、空の場合は「データなし」を表示する。

私は何かをするのがやや複雑であるという事実は、私は単純に間違っていると思います。

ここに私の現在の解決策があります。

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

これより良い解決策はありますか？

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

Answer 2

あなたはこれが動作しない v-if="inventory == ''"