how to check if an object element is empty

Question

I have a vue form and I am trying gather the data into an object, But when one object element is empty then Id want that field to be destroy'd.

this is my input field:

 <input v-model="fields.title" >

my data:

 data() {
        return {
            fields: {},
        }
    },

Basically right now what happens, is when I write something in my field, it creates title: 'data' and if i delete the text inside then that element still exists there so I am left with title: '', but I want it to be deleted if its empty.

I can recreate this like this:

computed: {
       destroyFieldWhenEmpty() {
           if (this.fields.title === ''){
               this.$delete(this.fields, 'title')
           }

But now If i have a lot of fields, I have to re-write that if statement for each input.

Thus, How could i go by doing this better?

destroyFieldWhenEmpty is a misuse of computed props, as it's seemingly used only to delete fields.title, but computed props are supposed to return something (to be used elsewhere in the component) and should not have side effects. — tony19
– tony19, Commented Nov 27, 2020 at 0:10
@BoussadjraBrahim So basically, I want to change a class of one of my div's When Data is inserted into any of the fields, to do this I'd need to check if the fields object is empty, and change the class based on that. — EricTalv
– EricTalv, Commented Nov 27, 2020 at 13:56

topdev87 · Accepted Answer · 2020-11-26 19:30:49Z

1

- Use lodash isEmpty() function

_.isEmpty({}) // true
_.isEmpty({title: 'title'}) // false

- Use Object.keys().length

const obj = {...}

If obj is empty, Object.keys(obj).length equals to 0.

edited Nov 26, 2020 at 19:30

answered Nov 26, 2020 at 19:16

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

Comments

Arab · Accepted Answer · 2020-11-26 19:24:08Z

0

So far I've got your problem, you're trying to delete an object from an array. if so you can filter data with your own business logic like this

const restFields = this.fields.filter(field => field.title.length > 0)

answered Nov 26, 2020 at 19:24

Arab

1071 silver badge7 bronze badges

2 Comments

tony19 Over a year ago

fields is an object, not an array.

Arab Over a year ago

@tony19 did you, did you try adding v-if="fields.title" to hide any vue component. or if you want to delete key from an object then try delete this.fields.title . Actually there too many ways to do it but not clear what is your logic there.

Collectives™ on Stack Overflow

how to check if an object element is empty

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related