vue.js proper way to determine empty object

Question

Classic scenario: I want to display a list, but when it's empty I want to display "No data".

The fact that it is somewhat complicated to do something I would expect to be simple makes me think I'm probably doing it wrong.

Here is my current solution.

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

Is there a better solution than this?

Niels Stubbe · Accepted Answer · 2021-11-17 16:18:10Z

80

You can just use length of inventory in v-if, like following:

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

Given that inventory variable is a hash and not an array, you can use any of the following to find it is empty and use that in 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({});
}

As you are already using jquery, you can also do:

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>

edited Nov 17, 2021 at 16:18

Niels Stubbe

52 bronze badges

answered Dec 17, 2016 at 3:55

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Finch_Powers Over a year ago

This doesn't work. inventory is not an array, it's an object, and objects don't have ".length" property.

Saurabh Over a year ago

@Finch_Powers I had missed that, I have updated the answer accordingly.

Finch_Powers Over a year ago

I tried <div v-if="Object.keys(inventory).length === 0">No item in inventory</div> as well as jQuery.isEmptyObject(inventory); and it doesn't work. I have a warning that states that vue cannot evaluate the expression.

Junv Over a year ago

Object.keys(yourObject).length === 0 this really works!

Trekdrop Over a year ago

In your first example, that should be v-if="!inventory.length" (if not has any length)

|

Melih · Accepted Answer · 2020-06-14 09:59:46Z

21

After searching for a few minutes, I come up with a better solution to check whether the object is empty or not.

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

It will return 0 if it's empty. If you want to check whether the array is empty or not you can definitely go for this solution below,

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

In my case it's an object, not array. So, it may also help. Happy coding :)

edited Jun 14, 2020 at 9:59

Melih

3695 silver badges18 bronze badges

answered Apr 24, 2020 at 19:11

Mr Talha

8359 silver badges14 bronze badges

1 Comment

Loosie94 Over a year ago

For me Object.keys(YOUR_OBJECT).length waas enough. Thanks!

Trekdrop · Accepted Answer · 2019-04-26 07:43:17Z

9

If it's an array, you can use

v-if="!array.length"

answered Apr 26, 2019 at 7:43

Trekdrop

4957 silver badges27 bronze badges

Comments

Awais Jameel · Accepted Answer · 2018-11-29 18:45:28Z

3

Worked Great for me...

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

answered Nov 29, 2018 at 18:45

Awais Jameel

2,20623 silver badges14 bronze badges

2 Comments

user11480180 Over a year ago

This gives a warning Comparison array.length == 0 may cause unexpected type coercion. While v-if="!array.length" doesn't. That's because of the double equal instead of the triple.

Flynn Hou Over a year ago

Seconded what @ILovePHP mentioned above. The best practice in JavaScript is to use === instead of ==.

Atchutha rama reddy Karri · Accepted Answer · 2019-04-04 09:41:36Z

2

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

answered Apr 4, 2019 at 9:41

Atchutha rama reddy Karri

1,56915 silver badges16 bronze badges

Comments

Shinwi · Accepted Answer · 2023-09-08 11:09:47Z

1

If it is an object, you can check the length of the array of its keys. Otherwise, if it is an array, you can directly check its length.

For Objects:

<div v-if="Object.keys(yourObj).length">
  // display your object here
</div>
<div v-else>
 No Records found
</div>

For Arrays:

<div v-if="yourArray.length">
  // display your array here
</div>
<div v-else>
 No Records found
</div>

answered Sep 8, 2023 at 11:09

Shinwi

1391 silver badge9 bronze badges

Comments

bryan belardo · Accepted Answer · 2021-03-29 06:36:00Z

-1

You can just use this v-if="(YOUR_OBJECT).total == 0"

answered Mar 29, 2021 at 6:36

bryan belardo

1

Collectives™ on Stack Overflow

vue.js proper way to determine empty object

7 Answers 7

7 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related