VUE JS: Guidelines

1 - avoid mutating a prop (use variables inside data())

VueJS Cycle: https://assets.digitalocean.com/articles/alligator/vuejs/external/component-lifecycle.png

prop:{
	products: {
	  type: Array,
	  default() {
		return []
	  }
	},
},

updated() {
	this.localProducts = this.products
}

2 - don't access child component variables, the child component must emit the data

3 - group imports by type (API, components, ...)

4 - use dash in file names to separate words

5 - avoid double quotes (same for the backend)

6 - It makes no sense to use 3 equals for such a simple comparison

do this

instead of this 
```if(response.status === true) ```

7 - 
instead of this 

// if any field is empty or null it will show a dash without info this.listStockCount.push({

  name: 

data[x].name + ' - ' + formatDate(data[x].date, 'date') + ' - ' + data[x].category_name,

  id: data[x].id

})

do this

this.listStockCount.push({

  name: [data[x].name, formatDate(data[x].date, data[x].category_name), state, zip].filter(Boolean).join(" - "),
  id: data[x].id

}) ```

8 - pagination and filters

Never make endpoints call asking data without limit or with a very high number of records, whatever the functionality there will always be a solution using pagination or filters. For tables,

  add pagination
  add filters to the page 

For lists, you can use filters. the problem of not having the id of the selected option in the array is easily solved in the customList component.

  the customList accept a value and label param, you will always have the id and name of the item selected in the resource and so you can pass for example:
  user_id as a value parameter and user_name as a label parameter