How to display elements out of order vuetify

Question

Still kind of new to vue/vuetify and firebase, trying to find some logical ideas/answers on this.

My goal is to add additional fields into the form, which these fields have been premade in firebase db. I've added the fields in firebase and of course they're last in the array. So when I loop the fields array from firebase, it displays on the browser in order. e.x: [Fullname, Gender, Date, Email, FirstName, LastName...]

VSCode

As you can see on my VSCode I'd like to show FirstName first, LastName second and so on...

Browser

My initial thoughts were to go into firebase and manually rearrange the field's values, but I feel that would be inefficient and perhaps malpractice (especially if there was a larger document of fields).

My research says to use lodash and orderBy computation but I'd like to find other potential answers.

Answer 1

You can simply add order to the field object and sort them by order with array.sort