DEV Community

Cover image for How can I refactor this code snippet?
ch
ch

Posted on

How can I refactor this code snippet?

#vue #javascript #refactorit

While developing vuejs project, I often meet a situation like the following:
Here "this" is the vue component.
I would love to refactor this code to look it very nice.
Please share your idea with me.
Thank you.

const newReportPart = {
        id: this.id,
        title: this.title,
        description: this.description,
        product_id: this.product_id,
        product_title: this.product_title,
        rate: this.rate,
        saved: this.saved,
        attachments: this.attachments,
      };
      this.$emit('submitReportPart', this.index, newReportPart);
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
bias profile image
Tobias Nickel •

what about this?

const newReportPart = { ... this };

are there other props you on this that should not get added o the event? maybe you want to checkout underscore js with its pick or omit methods.

Collapse
 
yeahch profile image
ch •

I see what you are meaning. but 'this' is Vue Component, and I want to pass only those parameters into newReportPart.
So I will take a look at pick or omit methods.
Thank you.

Collapse
 
donsalvador profile image
Salvador • • Edited

You can use this.$data

   this.$emit('submitReportPart', this.index, this.$data);

I guess you should clone $data before emit it

Collapse
 
yeahch profile image
ch •

this.$data is a object, and is a reference.
So emitting with this.$data incurs some reference error while running.
In order to pass value as a clone, I refactored it like the following.

const reportPartData = { ...this.$data };
this.$emit('submitReportPart', this.index, reportPartData);

And it works well.
Thank you for all your commenting here. :heart

Read next

kvetoslavnovak profile image

Experiences and Caveats of Svelte 5 Migration

kvetoslavnovak -

mukarramjavid profile image

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid -

jagroop2001 profile image

20 JavaScript Tricks Every Developer Must Know 🚀

Jagroop Singh -

kkr0423 profile image

React Basics~unit test/user event

Ogasawara Kakeru -