How to fix destructuring?

Question

JavaScript

There is a list of cities that is taken from the storage

ul.cities-list
 li.cities-list__item(
 v-for="city in CITIES_LIST_MAIN"
 @click="selectCity"
 v-bind="cityChoiceBinds"
 )
 | {{city.name}}

There is a bind: We sort through
the object of the cities that came to us and return:

cityChoiceBinds() {
 this.CITIES_LIST_MAIN.map((item) => {
  return item
 })
}

On the click of a city, it works:

selectCity(e, { cityCode, storeId, name }) {
 this.CHANGE_CITY({
  cityCode,
  storeId,
  name,
 })
},

In object which arrives from a getter CITIES_LIST_MAIN
All these properties are. Maybe the logic is different? Or am I stuck?

Answer 1

@click="selectCity"

selectCity(e, { cityCode, storeId, name }) {

And what are you going to destructure something? - CITIES_LIST_MAIN elements are not passed to the function. Must be passed on. And the event object is not needed, it is not used in selectCity, so we remove it from the list of parameters (but if it is suddenly needed in the future, it is available in the template as $event):
@click="selectCity(city)"

selectCity({ cityCode, storeId, name }) {
  ...

Answer 2

The cityChoiceBinds() function doesn't return anything, and map doesn't make sense in it.